/* ── La paleta sale de la tarjeta, muestreada del escaneo ─────────────────
   bermellon  #fd2d08   la banda y el "BRAIN"
   salvia     #a0a086   el "618" y el "HOUSE"
   salvia -   #6a6b59   la version oscura del mismo gris
   tinta      #837d6f   el texto de contacto, un gris calido
   Nada de azul ni de negro puro: la tarjeta no tiene ninguno de los dos.

   Compartido por todas las paginas del sitio (antes vivia dentro de
   index.html; al pasar a varias paginas se saco aqui para que el diseno sea
   uno solo). */
:root{
  /* El escaneo da 98% de saturacion, que en pantalla vibra. Mismo tono al 88%. */
  --rojo:#e6340e;
  --rojo-suave:#e6340e14;
  --salvia:#a0a086;
  --salvia-osc:#6a6b59;
  --tinta:#4a4b41;
  --tinta-suave:#837d6f;
  --papel:#fbfaf7;
  --linea:#e6e3dc;
  --radio:26px;
}
*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* Al dar clic en un ancla, la pagina se desliza en vez de saltar. */
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
section[id]{scroll-margin-top:88px}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font:400 17px/1.65 "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* La textura de puntitos del cartoncillo, muy tenue. */
  background-image:radial-gradient(var(--linea) .5px, transparent .5px);
  background-size:22px 22px;
}
.envoltura{max-width:1080px; margin:0 auto; padding:0 24px}
a{color:var(--rojo)}
code{font-family:"JetBrains Mono", ui-monospace, monospace; font-size:.9em; background:#fff; border:1px solid var(--linea); border-radius:6px; padding:1px 6px}

/* El monoespaciado con separacion es la firma de la tarjeta: ahi vive en los
   datos de contacto. Aqui se reserva para etiquetas y datos, nunca para leer
   parrafos. */
.etiqueta{
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.dosp{color:var(--rojo); font-weight:500}

/* ── Encabezado ───────────────────────────────────────────────────────── */
header{
  padding:16px 0; position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .2s;
}
header.pegado{border-bottom-color:var(--linea)}
header .envoltura{display:flex; align-items:center; gap:18px}
header img{height:34px; width:auto; display:block}
.marca-enlace{display:block; line-height:0}
header .lema{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-suave); padding-left:18px; border-left:1px solid var(--linea);
}
header nav{margin-left:auto; display:flex; gap:24px; align-items:center}
header nav a{
  color:var(--tinta-suave); text-decoration:none; font-size:14.5px;
  padding-bottom:2px; border-bottom:1.5px solid transparent; transition:.15s;
}
header nav a:hover, header nav a.activo{color:var(--rojo); border-bottom-color:var(--rojo)}
header nav a.boton{border-bottom:0; color:#fff}
header nav a.boton:hover{color:#fff}

/* El submenu de servicios se abre al pasar el cursor o al enfocar con el
   teclado; con un pequeno retraso de salida para que no se cierre al cruzar
   el hueco entre el enlace y la lista. */
.desplegable{position:relative}
.submenu{
  position:absolute; top:100%; left:-14px; padding-top:12px; display:none; min-width:250px;
}
.submenu > a{
  display:block; background:#fff; border:1px solid var(--linea); border-top:0;
  padding:11px 16px; font-size:14px; border-bottom:1.5px solid var(--linea);
}
.submenu > a:first-child{border-top:1px solid var(--linea); border-radius:14px 14px 0 0}
.submenu > a:last-child{border-radius:0 0 14px 14px}
.submenu > a:hover{background:var(--papel); border-bottom-color:var(--linea)}
.desplegable:hover .submenu, .desplegable:focus-within .submenu{display:block}

/* En celular el menu es una hoja que se despliega con un boton. */
.menu-movil{display:none; margin-left:auto}
.menu-movil summary{
  list-style:none; cursor:pointer; font-size:14px; color:var(--tinta);
  border:1px solid var(--linea); border-radius:999px; padding:7px 16px; background:#fff;
}
.menu-movil summary::-webkit-details-marker{display:none}
.menu-movil .hoja{
  position:absolute; left:0; right:0; top:100%; background:#fff;
  border-bottom:1px solid var(--linea); padding:10px 24px 18px; display:flex; flex-direction:column; gap:2px;
}
.menu-movil .hoja a{color:var(--tinta); text-decoration:none; padding:10px 0; border-bottom:1px solid var(--linea); font-size:15.5px}
.menu-movil .hoja a.boton{color:#fff; border:0; margin-top:12px; justify-content:center}

/* ── Portada ──────────────────────────────────────────────────────────── */
.portada{padding:34px 0 40px}
.tarjeta{
  position:relative; background:#fff; border-radius:var(--radio);
  border:1px solid var(--linea); overflow:hidden;
  box-shadow:0 1px 2px #0000000a, 0 18px 46px -28px #0000002e;
}
/* La banda roja del canto y su curva, como esta impresa la tarjeta. */
.tarjeta::before{content:""; position:absolute; inset:0 auto 0 0; width:88px; background:var(--rojo)}
.tarjeta::after{
  content:""; position:absolute; left:26px; top:64%; width:210px; height:210px;
  margin-top:-105px; border-radius:50%; background:#fff;
}
.tarjeta .canto{
  position:absolute; left:0; top:0; bottom:0; width:88px;
  display:flex; justify-content:center; align-items:flex-start; padding-top:52px; z-index:2;
}
.tarjeta .canto span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:12px; letter-spacing:.34em; text-transform:lowercase; color:#fff;
}
.portada .cuerpo{position:relative; z-index:3; padding:74px 60px 66px 150px; max-width:820px}
.portada img.logo{width:min(310px, 62vw); height:auto; margin-bottom:34px}
.portada h1, .cabecera-pagina h1{
  font-size:clamp(2rem, 4.6vw, 3.05rem); line-height:1.14; letter-spacing:-.022em;
  margin:0 0 20px; font-weight:700; color:#33342c;
}
.portada h1 em, .cabecera-pagina h1 em{font-style:normal; color:var(--rojo)}
p.entrada{font-size:clamp(1.02rem,1.9vw,1.19rem); color:var(--tinta-suave); margin:0 0 34px; max-width:58ch}
.acciones{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:8px}
.boton{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; cursor:pointer;
  background:var(--rojo); color:#fff; font-weight:500; font-size:15px; font-family:inherit;
  padding:13px 26px; border-radius:999px; transition:.15s; border:0;
}
.boton:hover{filter:brightness(1.08); transform:translateY(-1px)}
.boton.tenue{background:transparent; color:var(--tinta); border:1px solid var(--linea)}
.boton.tenue:hover{border-color:var(--salvia); background:#fff; transform:none; filter:none}
.boton.chico{padding:8px 16px; font-size:13.5px}
.boton.blanco{background:#fff; color:var(--rojo)}
.boton.borde{background:transparent; color:#fff; border:1px solid #ffffff8c}
.boton.borde:hover{background:#ffffff1a; filter:none}

/* Cabecera de las paginas interiores: mas sobria que la tarjeta de la portada. */
.cabecera-pagina{padding:48px 0 10px}
.cabecera-pagina h1{max-width:20ch; margin-top:14px}

/* ── Secciones ────────────────────────────────────────────────────────── */
section{padding:56px 0}
.titulo{margin:0 0 8px; font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.018em; color:#33342c}
.bajada{color:var(--tinta-suave); margin:0 0 36px; max-width:62ch}
.al-final{margin:22px 0 0; font-size:15px}
.al-final a{text-decoration:none; font-weight:500}

/* Dos por renglon en pantalla ancha: columnas angostas se leen mal con este
   largo de texto. */
.rejilla{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(340px,1fr))}
.bloque{
  background:#fff; border:1px solid var(--linea); border-radius:20px; padding:28px;
  position:relative; transition:.18s; text-decoration:none; color:inherit; display:block;
}
.bloque:hover{border-color:var(--salvia); transform:translateY(-2px)}
.bloque .num{
  font-family:"JetBrains Mono", ui-monospace, monospace; font-size:12px;
  color:var(--rojo); letter-spacing:.1em; display:block; margin-bottom:14px;
}
.bloque h3{margin:0 0 9px; font-size:1.09rem; color:#33342c; letter-spacing:-.01em}
.bloque p{margin:0; font-size:15px; color:var(--tinta-suave); line-height:1.6}
.bloque .ir{display:inline-block; margin-top:16px}

.nota{
  margin-top:8px; padding:24px 28px; border-left:3px solid var(--rojo);
  background:#fff; border-radius:0 16px 16px 0;
}
.nota p{margin:0 0 12px; font-size:15.5px; color:var(--tinta-suave); line-height:1.65}
.nota p:last-child{margin-bottom:0}
.nota strong{color:var(--tinta); font-weight:500}

/* Lista con el "::" de la tarjeta como vineta. */
.lista{list-style:none; margin:0; padding:0; display:grid; gap:12px; max-width:72ch}
.lista li{
  position:relative; padding:14px 18px 14px 44px; background:#fff; border:1px solid var(--linea);
  border-radius:14px; font-size:15.5px; color:var(--tinta-suave); line-height:1.6;
}
.lista li::before{
  content:"::"; position:absolute; left:17px; top:13px; color:var(--rojo);
  font-family:"JetBrains Mono", ui-monospace, monospace; font-weight:500;
}
.lista strong{color:var(--tinta); font-weight:500}

/* ── Lineas de negocio ────────────────────────────────────────────────── */
.linea{
  display:flex; flex-wrap:wrap; align-items:center; gap:22px;
  background:#fff; border:1px solid var(--linea); border-radius:20px;
  padding:26px 30px; margin-bottom:14px;
}
.linea .marca{font-weight:700; font-size:1.14rem; color:#33342c; letter-spacing:-.01em; min-width:150px}
.linea p{margin:0; flex:1; min-width:230px; font-size:15px; color:var(--tinta-suave)}
.pastilla{
  font-family:"JetBrains Mono", ui-monospace, monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; padding:6px 13px;
  border-radius:999px; white-space:nowrap;
}
.pastilla.vivo{background:var(--rojo-suave); color:var(--rojo)}
.linea.enlazada{text-decoration:none; color:inherit; transition:.18s}
.linea.enlazada:hover{border-color:var(--salvia); transform:translateY(-2px)}
.ir{
  font-family:"JetBrains Mono", ui-monospace, monospace; font-size:12px;
  letter-spacing:.1em; color:var(--rojo); white-space:nowrap;
}
.enlazada:hover .ir span, .enlazado:hover .ir span{margin-left:4px}
.ir span{display:inline-block; transition:margin-left .18s}

/* ── Capacidades e insignias ──────────────────────────────────────────── */
.saberes{display:flex; flex-wrap:wrap; gap:9px}
.saber{
  font-family:"JetBrains Mono", ui-monospace, monospace; font-size:12.5px;
  border:1px solid var(--linea); background:#fff; color:var(--tinta-suave);
  padding:8px 15px; border-radius:999px; text-decoration:none;
}
a.saber:hover{border-color:var(--rojo); color:var(--rojo)}
.insignias{margin-top:26px}
.insignias .etiqueta{display:block; margin-bottom:12px}
.pie-insignias{margin:10px 0 0; font-size:13.5px; color:var(--tinta-suave)}

/* ── Capturas ─────────────────────────────────────────────────────────── */
.capturas{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); margin-top:22px}
.captura{margin:0}
.captura img{
  width:100%; height:auto; display:block; border-radius:16px; border:1px solid var(--linea);
  box-shadow:0 14px 34px -24px #00000040; background:#fff;
}
.captura figcaption{font-size:13.5px; color:var(--tinta-suave); margin-top:10px}

/* ── Preguntas frecuentes ─────────────────────────────────────────────── */
.faq{display:grid; gap:10px; max-width:76ch}
.faq details{background:#fff; border:1px solid var(--linea); border-radius:14px; padding:0 20px}
.faq summary{cursor:pointer; padding:16px 0; font-weight:500; color:#33342c; list-style:none; position:relative; padding-right:30px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:2px; top:14px; color:var(--rojo); font-family:"JetBrains Mono", monospace; font-size:18px}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 18px; font-size:15px; color:var(--tinta-suave); line-height:1.65}

/* ── Formulario ───────────────────────────────────────────────────────── */
.formulario{display:grid; gap:16px; max-width:640px; background:#fff; border:1px solid var(--linea); border-radius:20px; padding:28px}
.formulario label{display:grid; gap:6px; font-size:14px; color:var(--tinta)}
.formulario input, .formulario textarea{
  font:inherit; font-size:15.5px; color:var(--tinta); border:1px solid var(--linea); border-radius:12px;
  padding:11px 14px; background:var(--papel); width:100%;
}
.formulario input:focus, .formulario textarea:focus{outline:2px solid var(--rojo-suave); border-color:var(--rojo)}
.formulario .aviso{font-size:14px; color:var(--tinta-suave)}
.formulario .legal{margin:0; font-size:13px; color:var(--tinta-suave)}

/* ── Contacto ─────────────────────────────────────────────────────────── */
.contacto{background:var(--rojo); border-radius:var(--radio); padding:56px 52px; color:#fff}
.contacto h2{margin:0 0 10px; font-size:clamp(1.6rem,3.3vw,2.2rem); letter-spacing:-.02em}
.contacto p{margin:0 0 26px; color:#ffffffcf; max-width:54ch}
.datos{display:flex; flex-wrap:wrap; gap:14px 34px; align-items:center; margin-top:26px}
.dato{
  font-family:"JetBrains Mono", ui-monospace, monospace; font-size:15px;
  letter-spacing:.05em; color:#fff; text-decoration:none;
  border-bottom:1px solid #ffffff5c; padding-bottom:2px;
}
.dato:hover{border-bottom-color:#fff}

footer{padding:44px 0 56px; color:var(--tinta-suave); font-size:14px; border-top:1px solid var(--linea); margin-top:20px}
footer .columnas{display:grid; gap:28px; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); line-height:1.9}
footer a{color:var(--tinta-suave); text-decoration:none}
footer a:hover{color:var(--rojo)}
footer strong{color:var(--tinta); font-weight:500}

@media (max-width:860px){
  header nav{display:none}
  .menu-movil{display:block}
  header .lema{display:none}
}
@media (max-width:720px){
  .tarjeta::before,.tarjeta .canto{display:none}
  .portada .cuerpo{padding:44px 28px 40px}
  .contacto{padding:40px 28px}
  section{padding:44px 0}
  .rejilla{grid-template-columns:1fr}
  .formulario{padding:22px}
}

/* Campo trampa del formulario: fuera de la vista y del orden de tabulacion,
   pero presente en el DOM para que un robot lo llene. */
.trampa{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}