/* ═══════════════════════════════════════════════════════════════════════════
   LANDING GLOBAL — solo reparte. No lleva un solo precio.
   Depende de base.css. Deliberadamente MÁS sobria que la de departamento:
   aquí no se vende nada, se enseña el mapa y se manda a la puerta correcta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── HERO ───────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   HERO EN DOS MITADES  (09-09-2026)
   ───────────────────────────────────────────────────────────────────────────
   Antes: foto a sangre con el titular blanco encima. El velo oscuro caía a
   cero hacia la derecha y la última palabra del eslogan —«demás»— aterrizaba
   justo sobre la ventana iluminada de la foto y se perdía. Se parcheó dos
   veces (alargar el velo, aclarar el morado, ponerle halo) y seguía sin ser
   fiable: dependía de qué foto hubiera detrás y de dónde cortara la línea.

   Ahora la izquierda es tinta lisa, sin foto. El contraste deja de ser un
   ajuste y pasa a estar garantizado por construcción. Toda la fotografía se
   va a la vitrina de la derecha, donde además hace trabajo comercial: cada
   tarjeta enseña un producto y lleva a su página.

   Se fueron con el cambio: los dos botones del centro y las cinco pastillas
   de departamento. Las pastillas nombraban; la vitrina enseña.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-g {
  position: relative; min-height: 100vh;
  display: grid; align-items: center;
  padding: 136px 0 76px; overflow: hidden; isolation: isolate;
}

/* Sin foto a propósito. hero-global.jpg sigue en assets/img por si vuelve. */
.hero-g-fondo {
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(125% 95% at 8% 22%,
    #2a2142 0%, #1b1728 42%, #14111c 72%, #100e16 100%);
}
.hero-g-fondo::after { content: none; }

.hero-g-rejilla {
  position: relative; z-index: 2;
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 60px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(36px, 5vw, 76px); align-items: center;
}

.hero-g-centro { max-width: 620px; }
.hero-g .t-h1 { font-size: clamp(38px, 3.9vw, 55px); color: #ffffff; margin-bottom: 24px; }
.hero-g-busqueda { display: block; color: #d8caff; margin-bottom: 16px; }
.hero-g .acento { color: #d8caff; }
.hero-g .t-lead { color: rgba(255,255,255,.86); max-width: 560px; margin: 0; }
.hero-g .t-lead strong { color: #ffffff; font-weight: 650; }
.hero-g .t-micro { color: rgba(255,255,255,.62); }

/* El motivo del logo, gigante y casi invisible, girando muy despacio */
.hero-g-orbe {
  position: absolute; z-index: 1; top: 50%; left: 6%;
  width: min(820px, 118vw); aspect-ratio: 1; translate: -50% -50%;
  opacity: .13; pointer-events: none;
  animation: gira 90s linear infinite;
}
.hero-g-orbe circle { fill: none; stroke: #fff; stroke-width: .6; }
@keyframes gira { to { rotate: 360deg; } }

/* ─── LA VITRINA ─────────────────────────────────────────────────────────── */
.hero-vitrina { position: relative; }

.hero-vitrina-pista {
  position: relative; list-style: none; margin: 0; padding: 0;
  height: clamp(400px, 62vh, 580px);
  border-radius: var(--r-panel); overflow: hidden;
  box-shadow: 0 40px 80px -32px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.09);
}

.hero-tarjeta {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .8s ease, visibility .8s;
}
.hero-tarjeta[data-activa] { opacity: 1; visibility: visible; }

/* Un acercamiento muy lento mientras la tarjeta está a la vista: sin él, un
   panel quieto durante seis segundos parece una imagen rota. */
.hero-tarjeta img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.06); transition: transform 7s linear;
}
.hero-tarjeta[data-activa] img { transform: scale(1); }

.hero-tarjeta-texto {
  position: absolute; inset: auto 0 0 0; padding: clamp(22px, 2.6vw, 34px);
  background: linear-gradient(180deg,
    rgba(10,8,16,0) 0%, rgba(10,8,16,.60) 38%, rgba(10,8,16,.92) 100%);
  color: #fff;
}
.hero-tarjeta-etiqueta {
  display: inline-block; margin-bottom: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: #d8caff;
}
/* Marcaba los departamentos sin página. Desde el 09-09 los siete están
   abiertos, así que no se usa — se conserva por si vuelve a hacer falta al
   anunciar uno antes de tenerlo. */
.hero-tarjeta-tag {
  display: inline-block; margin: 0 0 9px 9px; padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  color: rgba(255,255,255,.8); text-transform: none; vertical-align: 1px;
}
.hero-tarjeta h2 {
  font-family: var(--font-head); font-size: clamp(27px, 2.5vw, 34px);
  font-weight: 600; letter-spacing: -.01em; line-height: 1.1;
  color: #fff; margin-bottom: 7px;
}
.hero-tarjeta p {
  font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.82);
  max-width: 42ch; margin-bottom: 17px;
}
.hero-tarjeta-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 19px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.30);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 13.5px; font-weight: 600; color: #fff;
  transition: background .18s, border-color .18s, gap .18s;
}
.hero-tarjeta-btn:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.5); gap: 11px; }

/* Los mandos van debajo, no encima de la foto: flanqueando los puntos ocupan
   una fila propia y no tapan la escena ni pelean con el texto de la tarjeta. */
.hero-vitrina-mandos {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 18px;
}
.hero-vitrina-flecha {
  width: 32px; height: 32px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20);
  color: rgba(255,255,255,.75);
  transition: background .18s, border-color .18s, color .18s;
}
.hero-vitrina-flecha:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.42); color: #fff; }
.hero-vitrina-flecha svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }

.hero-vitrina-puntos { display: flex; gap: 8px; justify-content: center; }
.hero-vitrina-puntos button {
  width: 26px; height: 4px; padding: 0; border: 0; border-radius: 2px; cursor: pointer;
  background: rgba(255,255,255,.24); transition: background .25s, width .25s;
}
.hero-vitrina-puntos button:hover { background: rgba(255,255,255,.5); }
.hero-vitrina-puntos button[aria-selected="true"] { background: #d8caff; width: 40px; }

@media (prefers-reduced-motion: reduce) {
  .hero-g-orbe { animation: none; }
  .hero-tarjeta img { transition: none; transform: none; }
  .hero-tarjeta { transition: opacity .01s; }
}

@media (max-width: 940px) {
  .hero-g { min-height: 0; padding: 116px 0 60px; }
  .hero-g-rejilla { grid-template-columns: 1fr; gap: 40px; }
  .hero-g-centro { max-width: 640px; }
  .hero-vitrina-pista { height: clamp(340px, 52vh, 440px); }
  .hero-g-orbe { left: 50%; opacity: .1; }
}

/* ─── QUIÉNES SOMOS ──────────────────────────────────────────────────────── */
.somos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 52px; }
.persona {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: 30px; display: flex; gap: 24px; align-items: flex-start;
}
/* ┌─ LAS FOTOS DE PERFIL ──────────────────────────────────────────────────┐
   │  Suelta  assets/img/isma.jpg  y  assets/img/marco.jpg  y aparecen      │
   │  solas. Cuadradas, mínimo 800×800.                                     │
   │  Mientras no estén se ve una silueta neutra, no un hueco roto ni un    │
   │  cartel de «falta la foto» — que quedaba fatal justo debajo de la      │
   │  frase que dice que aquí da la cara la gente.                          │
   │  Dirección para hacerlas (con el móvil vale) en PROMPTS-IMAGENES.md.   │
   └────────────────────────────────────────────────────────────────────────┘ */
.persona-foto {
  width: 132px; height: 132px; flex: none; border-radius: 24px;
  border: 1px solid var(--line); overflow: hidden;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b5be' stroke-width='1.3'><circle cx='12' cy='9' r='3.6'/><path d='M4.5 20a7.5 7.5 0 0115 0'/></svg>")
      center / 46% no-repeat,
    var(--cream-deep);
}
/* La foto va como primera capa y la silueta debajo: si el archivo aún no
   existe el navegador ignora esa capa y se sigue viendo la silueta. */
.persona-foto[data-foto] {
  background-image:
    var(--foto, none),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b5be' stroke-width='1.3'><circle cx='12' cy='9' r='3.6'/><path d='M4.5 20a7.5 7.5 0 0115 0'/></svg>");
  background-size: cover, 46%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-color: var(--cream-deep);
}
.persona-foto[data-foto="isma"]  { --foto: url('/assets/img/isma.jpg'); }
.persona-foto[data-foto="marco"] { --foto: url('/assets/img/marco.jpg'); }

/* El remate de la sección: la pulla a los que montan lo que no entienden */
.somos-cierre {
  margin: 26px auto 0; max-width: 720px; text-align: center;
  font-size: 16px; line-height: 1.7; color: var(--ink-3);
}
.somos-cierre strong { color: var(--ink); font-weight: 650; }
.persona h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.persona h3 span { display: block; font-size: 12px; font-weight: 600; color: var(--purple); letter-spacing: .05em; text-transform: uppercase; margin-top: 3px; }
.persona p { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin-top: 11px; }
@media (max-width: 820px) { .somos { grid-template-columns: 1fr; } }
@media (max-width: 460px) {
  .persona { flex-direction: column; gap: 18px; }
  .persona-foto { width: 108px; height: 108px; }
}

/* ─── SERVICIOS ──────────────────────────────────────────────────────────── */
.servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 52px; }

.serv {
  position: relative; display: block;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: 34px 32px 30px; overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
}
.serv-viva:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: rgba(124,58,237,.35); }
/* ─── LA FOTO DE CADA DEPARTAMENTO ───────────────────────────────────────
   Los márgenes negativos son exactamente el padding de .serv (34/32/30): así
   la foto llega a los bordes y el overflow:hidden de la tarjeta la recorta con
   el mismo radio. Si cambias el padding, cambia también esto.

   NO son las mismas fotos que la vitrina del hero, a propósito. Repetir una
   imagen entre páginas está bien —confirma que has llegado donde pinchaste—,
   pero repetirla dos veces en el mismo scroll es lo que canta. Las del hero
   son el ambiente del departamento; estas son el trabajo: unas manos, un
   montón de facturas, un móvil que se enciende cuando ya has cerrado.
   ───────────────────────────────────────────────────────────────────────── */
.serv-foto {
  width: calc(100% + 64px);
  /* El reset de base.css pone max-width:100% a toda imagen y le comía los
     64 px de más: la foto se quedaba corta por la derecha. */
  max-width: none;
  margin: -34px -32px 22px;
  aspect-ratio: 3 / 2; height: auto;
  object-fit: cover; object-position: center 42%;
  transition: transform .5s cubic-bezier(.2,.8,.3,1);
}
.serv-viva:hover .serv-foto { transform: scale(1.035); }
/* Los tres que aún no existen: la foto se apaga, no se quita. Enseña adónde
   va a ir sin fingir que ya está. */
.serv-apagada .serv-foto { filter: grayscale(.6) brightness(.92); opacity: .72; }

.serv-num { font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--ink-4); }
.serv h3 { font-family: var(--font-head); font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 8px 0 12px; }
.serv p { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.serv-pie { margin-top: 22px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; color: var(--purple); }
.serv-viva:hover .serv-pie svg { transform: translateX(3px); }
.serv-pie svg { transition: transform .22s cubic-bezier(.2,.8,.3,1); }

/* Los departamentos que aún no existen. No se ocultan: el mapa completo
   comunica alcance, y el hueco crea la pregunta que se resuelve en la llamada. */
.serv-apagada { background: var(--cream); border-style: dashed; }
.serv-apagada h3, .serv-apagada .serv-num { color: var(--ink-4); }
.serv-apagada p { color: var(--ink-3); }
.serv-apagada .serv-pie { color: var(--ink-4); font-weight: 600; }
.serv-etiq {
  position: absolute; top: 22px; right: 22px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4); background: rgba(255,255,255,.8);
  padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line);
}

/* ─── PROYECTOS ──────────────────────────────────────────────────────────── */
.proyectos { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 16px; margin-top: 52px; }
.proy {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 11px;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s;
}
.proy:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.proy-tag {
  align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-pill);
}
.proy-tag-propio  { background: var(--purple-tint); color: var(--purple); }
.proy-tag-cliente { background: var(--cream-deep); color: var(--ink-3); }
.proy h3 { font-family: var(--font-head); font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.proy-sector { font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-top: -6px; }
.proy p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.proy p strong { color: var(--ink); font-weight: 650; }
/* El gancho: la frase que entra de lado antes de explicar nada */
.proy-gancho {
  font-family: var(--font-head); font-size: 19px !important; line-height: 1.35 !important;
  font-style: italic; color: var(--ink) !important; letter-spacing: -.01em;
  padding-left: 14px; border-left: 2px solid var(--purple);
}

/* ─── CONTACTO / ASESORÍA ────────────────────────────────────────────────── */
.asesoria {
  background: var(--ink); color: #fff; border-radius: var(--r-panel);
  padding: 68px 56px; margin-top: 52px; text-align: center;
}
.asesoria h2 { color: #fff; margin-bottom: 18px; }
.asesoria > p { color: rgba(255,255,255,.62); max-width: 560px; margin: 0 auto 34px; font-size: 17.5px; line-height: 1.6; }
.asesoria .btn-2 { background: #fff; color: var(--ink); box-shadow: none; }
.asesoria .btn-2:hover { background: rgba(255,255,255,.9); }

.asesoria-lista {
  margin: 44px auto 0; max-width: 620px; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; text-align: left;
}
.asesoria-lista div { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.62); }
.asesoria-lista b { display: block; color: #fff; font-size: 15px; font-weight: 650; margin-bottom: 5px; }
@media (max-width: 760px) {
  .asesoria { padding: 52px 26px; }
  .asesoria-lista { grid-template-columns: 1fr; gap: 20px; }
}

/* ─── CÓMO FUNCIONA, EN TRES PASOS ───────────────────────────────────────
   Hueco detectado al revisar twin.so: la página decía qué hacemos y qué
   hemos hecho, pero no qué pasa después de la llamada.
   ⚠️ El paso 3 NO dice «hasta que se pague sola»: a Ismael no le gusta ese
   término. Se mide en trabajo quitado, que además el cliente puede comprobar.
   ──────────────────────────────────────────────────────────────────────── */
.pasos {
  list-style: none; margin-top: 52px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  counter-reset: paso;
}
.paso {
  position: relative; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: 34px 30px 30px;
}
.paso-num {
  font-family: var(--font-head); font-size: 15px; font-weight: 600;
  color: var(--purple); letter-spacing: .06em;
}
.paso h3 {
  font-family: var(--font-head); font-size: 25px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.18; margin: 9px 0 12px;
}
.paso p { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.paso p strong { color: var(--ink); font-weight: 650; }
/* La línea que une los tres pasos: se lee como un recorrido, no como tres cajas */
.paso + .paso::before {
  content: ''; position: absolute; left: -18px; top: 52px;
  width: 18px; height: 1px; background: var(--line);
}
@media (max-width: 880px) {
  .pasos { grid-template-columns: 1fr; }
  .paso + .paso::before { display: none; }
}

/* ─── LA OBJECIÓN DEL CHATGPT ────────────────────────────────────────────
   Twin se compara con ChatGPT, Zapier y Cowork. Para un autónomo la duda
   que frena la llamada es exactamente ésta, y no la resolvía nada.
   ──────────────────────────────────────────────────────────────────────── */
.contraste {
  margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden;
}
.contraste-celda { background: var(--white); padding: 34px 30px; }
.contraste-celda h3 {
  font-family: var(--font-head); font-size: 23px; font-weight: 600;
  letter-spacing: -.015em; line-height: 1.2; margin-bottom: 11px; color: var(--ink-3);
}
.contraste-celda p { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.contraste-celda p strong { color: var(--ink); font-weight: 650; }

.contraste-pie {
  margin: 26px auto 0; max-width: 700px; text-align: center;
  font-size: 15.5px; line-height: 1.7; color: var(--ink-3);
}
.contraste-pie strong { color: var(--ink); font-weight: 650; }

@media (max-width: 880px) { .contraste { grid-template-columns: 1fr; } }

/* Enlace a las páginas de solución desde sus tarjetas de proyecto. Estuvieron
   sin enlazar mientras vendían con los precios de antes de agosto. */
.proy-enlace {
  order: 9; margin-top: 4px; align-self: flex-start;
  font-size: 13.5px; font-weight: 650; color: var(--purple);
  transition: gap .2s, opacity .2s;
}
.proy-enlace:hover { opacity: .72; }

/* ─── SOFTWARES YA MONTADOS ──────────────────────────────────────────────
   Dentia y Bookia dentro de «Servicios», pero como bloque aparte: no son un
   departamento, son soluciones cerradas y personalizables. Siguen además en
   «Nuestros proyectos», que es donde se cuentan como caso.
   ──────────────────────────────────────────────────────────────────────── */
.prediseñados {
  margin-top: 56px; padding-top: 48px;
  border-top: 1px solid var(--line);
}
.predis-cajas {
  margin-top: 30px; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.predis {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-panel); padding: 30px 30px 26px;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
}
.predis:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: rgba(124,58,237,.32); }
.predis-marca {
  align-self: flex-start; font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--purple);
  background: var(--purple-tint); padding: 5px 11px; border-radius: var(--r-pill);
}
.predis h4 {
  font-family: var(--font-head); font-size: 27px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.15; margin: 14px 0 10px;
}
.predis p { font-size: 15px; line-height: 1.68; color: var(--ink-2); flex: 1; }
.predis-pie {
  margin-top: 20px; display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 650; color: var(--purple);
}
.predis:hover .predis-pie svg { transform: translateX(3px); }
.predis-pie svg { transition: transform .22s cubic-bezier(.2,.8,.3,1); }

@media (max-width: 820px) { .predis-cajas { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   PALETA POR APARTADOS  (09-09-2026)
   ───────────────────────────────────────────────────────────────────────────
   El fondo dejó de ser blanco y pasó a crema en base.css. Aquí cada sección de
   la home coge además su propio tono, y cada uno responde a una pregunta:

     quiénes     crema        el tono de la casa, para empezar
     cómo        crema hondo  un escalón: cambia el tema
     servicios   blanco       el catálogo respira; es lo único que se lee en frío
     proyectos   tinta        los casos pesan, y riman con el hero
     ChatGPT     crema hondo  vuelve al ritmo tras el bloque oscuro
     contacto    morado claro el único sitio donde se actúa, y se nota

   Antes había dos secciones blancas seguidas —servicios y proyectos— que
   rompían la alternancia sin querer.

   Las tarjetas no se tocan: siguen blancas, y es el fondo el que las despega.
   ═══════════════════════════════════════════════════════════════════════════ */
#quienes   { background: var(--cream); }
#como      { background: var(--cream-deep); }
#servicios { background: var(--white); }
#proyectos { background: var(--ink); }
#chatgpt   { background: var(--cream-deep); }
#contacto  { background: var(--purple-tint); }

/* ─── PROYECTOS EN TINTA ─────────────────────────────────────────────────
   Al girar el fondo hay que girar todo lo que estaba pensado para leerse en
   tinta sobre claro. Si falta alguna regla aquí, el texto desaparece. */
#proyectos .t-h2,
#proyectos h3            { color: #fff; }
#proyectos .t-lead,
#proyectos p             { color: rgba(255,255,255,.72); }
#proyectos .t-eyebrow,
#proyectos .acento       { color: #d8caff; }
#proyectos .proy {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.13);
}
#proyectos .proy:hover   { background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.22); }
#proyectos .proy-sector   { color: rgba(255,255,255,.6); }
/* .proy-gancho lleva `color: var(--ink) !important` en su regla original, y sin
   otro !important aquí se quedaba negro sobre el fondo de tinta: invisible. */
#proyectos .proy-gancho   { color: rgba(255,255,255,.82) !important; border-left-color: #d8caff; }
#proyectos .proy-tag-cliente { background: rgba(255,255,255,.10); color: rgba(255,255,255,.72); }
#proyectos .proy-tag-propio  { background: rgba(216,202,255,.16); color: #d8caff; }
#proyectos .proy-enlace  { color: #d8caff; }