/* Plantilla común de las apps de Arce Data Lab: superficie tonal clara,
   tarjetas blancas redondeadas, Roboto Flex y el color en las áreas y los proyectos.
   Lo propio de la plantilla está al final, en «Plantilla común». */
/* Tipografías servidas desde la propia web (sin pedir nada a Google) */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fuentes/robotoflex-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: 'Roboto Flex';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fuentes/robotoflex-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 {
  --fondo: #F3F6FA;
  --tarjeta: #FFFFFF;
  --capa: #E6EBF2;
  --tonal: #D3E4F5;
  --sobre-tonal: #0B2E4B;
  --suave: #FFFFFF;
  --tinta: #191C20;
  --texto: #2E3238;
  --tenue: #5A5F67;
  --raya: #E3E8EE;
  --azul: #1D4F7A;

  --titulos: 'Roboto Flex', Roboto, 'Segoe UI', system-ui, sans-serif;
  --cuerpo: 'Roboto Flex', Roboto, 'Segoe UI', system-ui, sans-serif;

  --ancho: 1160px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

svg {
  display: block;
}

a {
  color: var(--azul);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--tinta);
}

p {
  margin: 0;
}

code {
  font-size: 0.9em;
  background: var(--suave);
  padding: 1px 5px;
  border-radius: 4px;
}

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}

.saltar {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--tinta);
  color: #FFFFFF;
}

.saltar:focus {
  left: 8px;
}

/* Cabecera */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 18px max(28px, calc((100vw - var(--ancho)) / 2 + 28px));
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--raya);
}

.marca {
  color: var(--tinta);
  font-family: var(--titulos);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.marca span {
  margin-left: 10px;
  color: var(--tenue);
  font-family: var(--cuerpo);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
}

.menu a {
  color: var(--texto);
  font-family: var(--titulos);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.menu a:hover {
  color: var(--azul);
}

/* Presentación */

.inicio {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 56px 28px 44px;
}

.inicio h1 {
  max-width: 24ch;
  font-family: var(--titulos);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.inicio p {
  max-width: 64ch;
  margin-top: 20px;
  font-size: 19px;
}

/* Franja de áreas: cuatro paneles inclinados */

.areas {
  display: flex;
  height: 400px;
  overflow: hidden;
  background: var(--tinta);
}

.area {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-inline: -34px;
  padding: 24px 56px;
  background: var(--c);
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  clip-path: polygon(68px 0, 100% 0, calc(100% - 68px) 100%, 0 100%);
  transition: filter 0.25s, flex 0.35s ease;
}

.area:first-child {
  margin-left: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 68px) 100%, 0 100%);
}

.area:last-child {
  margin-right: 0;
  clip-path: polygon(68px 0, 100% 0, 100% 100%, 0 100%);
}

.area:hover,
.area:focus-visible {
  flex: 1.25;
  filter: brightness(1.15);
}

.area svg {
  width: 74px;
  height: 74px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.area strong {
  margin-top: 8px;
  font-family: var(--titulos);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.area span {
  max-width: 22ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
  line-height: 1.4;
}

.area em {
  margin-top: 10px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-family: var(--titulos);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.franja {
  padding: 22px 28px;
  background: var(--azul);
  color: #FFFFFF;
  font-family: var(--titulos);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

/* Bloques */

.bloque {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 84px 28px 0;
}

.bloque h2 {
  font-family: var(--titulos);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

.sub {
  margin-top: 6px;
  color: var(--tenue);
  font-size: 15px;
  text-align: center;
}

/* Proyectos */

.filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 28px;
  margin: 30px 0 28px;
}

.filtro {
  padding: 4px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--tenue);
  font-family: var(--titulos);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.filtro:hover {
  color: var(--tinta);
}

.filtro.activo {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
}

.cuadricula {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.tesela {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  aspect-ratio: 3 / 4;
  padding: 16px 12px;
  border: 0;
  background: var(--c);
  color: #FFFFFF;
  font: inherit;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: filter 0.25s;
}

.tesela.oculta {
  display: none;
}

.tesela svg {
  width: 58px;
  height: 58px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
  transition: transform 0.35s ease;
}

.tesela-titulo {
  font-family: var(--titulos);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance;
}

.tesela-tipo {
  position: absolute;
  inset: auto 0 14px 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.tesela:hover,
.tesela:focus-visible {
  filter: brightness(1.18);
}

.tesela:hover svg {
  transform: scale(1.12);
}

/* Relieve 3D al pasar el ratón (js/app.js añade .relieve y las variables) */
.cuadricula,
.servicios {
  perspective: 900px;
}

.relieve {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.18s ease-out, filter 0.25s, box-shadow 0.25s;
  will-change: transform;
}

.relieve:hover {
  box-shadow: 0 18px 34px rgba(21, 32, 43, 0.22);
}

.relieve::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.22), transparent 55%);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.relieve:hover::after {
  opacity: 1;
}

.tesela.relieve svg,
.servicio.relieve svg {
  transform: translateZ(30px);
}

.tesela.relieve:hover svg {
  transform: translateZ(46px) scale(1.12);
}

.servicio.relieve {
  position: relative;
  background: var(--fondo);
}

/* Ficha de proyecto */

.ficha {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  background: var(--fondo);
  color: var(--texto);
  overflow: auto;
}

.ficha::backdrop {
  background: rgba(21, 32, 43, 0.6);
}

.ficha-cabecera {
  display: grid;
  place-items: center;
  height: 150px;
  background: var(--c, var(--azul));
}

.ficha-cabecera svg {
  width: 72px;
  height: 72px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ficha-cuerpo {
  padding: 30px 34px 36px;
}

.ficha-cuerpo h3 {
  font-family: var(--titulos);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-transform: uppercase;
}

.ficha-cuerpo > p {
  margin-top: 14px;
}

.etiqueta {
  margin: 0 0 8px !important;
  color: var(--tenue);
  font-size: 14px;
}

.caso {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
}

.caso dt {
  color: var(--tinta);
  font-family: var(--titulos);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.caso dd {
  margin: 2px 0 0;
}

.tec {
  padding-top: 16px;
  border-top: 1px solid var(--raya);
  color: var(--tenue);
  font-size: 14.5px;
}

.enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding-top: 4px;
}

.enlaces a {
  font-weight: 600;
}

.ficha-cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.ficha-cerrar:hover {
  background: rgba(255, 255, 255, 0.32);
}

/* Trayectoria y tecnologías: listas de dos columnas */

.lista {
  max-width: 880px;
  margin: 36px auto 0;
  padding: 0;
  list-style: none;
}

.lista > li,
.lista > div {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 6px 36px;
  padding: 22px 0;
  border-top: 1px solid var(--raya);
}

.lista > li:last-child,
.lista > div:last-child {
  border-bottom: 1px solid var(--raya);
}

.cuando {
  padding-top: 3px;
  color: var(--tenue);
  font-family: var(--titulos);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lista h3 {
  font-size: 18.5px;
  font-weight: 600;
  line-height: 1.3;
}

.lista h3 span {
  color: var(--tenue);
  font-weight: 400;
}

.lista p {
  margin-top: 6px;
}

.lista dd {
  margin: 0;
}

/* Divulgación */

.cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 880px;
  margin: 36px auto 0;
  text-align: center;
}

.cifras strong {
  display: block;
  color: var(--tinta);
  font-family: var(--titulos);
  font-size: 52px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cifras span {
  display: block;
  margin-top: 8px;
  color: var(--tenue);
  font-size: 14.5px;
  line-height: 1.45;
}

.cifras a {
  display: inline-block;
  margin-top: 10px;
  color: var(--azul);
  font-size: 14.5px;
  text-underline-offset: 4px;
}

/* Contacto */

.contacto {
  padding-bottom: 96px;
  text-align: center;
}

.correo {
  display: inline-block;
  margin-top: 28px;
  color: var(--tinta);
  font-family: var(--titulos);
  font-size: clamp(26px, 4.4vw, 44px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  overflow-wrap: anywhere;
}

.correo:hover {
  color: var(--azul);
}

.redes {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 20px;
}

.redes a {
  color: var(--texto);
  font-family: var(--titulos);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pie {
  padding: 24px 28px;
  border-top: 1px solid var(--raya);
  color: var(--tenue);
  font-size: 14px;
  text-align: center;
}

/* Tableta y móvil */

@media (max-width: 980px) {
  .cuadricula {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Los paneles pasan a una cuadrícula de dos por dos, sin inclinación. */
  .areas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
  }

  .area,
  .area:first-child,
  .area:last-child {
    margin: 0;
    padding: 34px 20px;
    clip-path: none;
  }

  .area:hover {
    flex: none;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  /* En móvil la cabecera ocupa dos líneas: no se queda fija. */
  .cabecera {
    position: static;
    padding: 14px 20px;
  }

  .marca span {
    display: none;
  }

  .menu {
    gap: 4px 18px;
  }

  .menu a {
    font-size: 15px;
  }

  .inicio {
    padding: 36px 20px 34px;
  }

  .bloque {
    padding: 64px 20px 0;
  }

  .contacto {
    padding-bottom: 72px;
  }

  .cuadricula {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .area svg {
    width: 52px;
    height: 52px;
  }

  .area strong {
    font-size: 21px;
  }

  .lista > li,
  .lista > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .cifras {
    grid-template-columns: minmax(0, 1fr);
  }

  .ficha-cuerpo {
    padding: 24px 22px 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .area,
  .tesela,
  .tesela svg {
    transition: none;
  }
}

/* Foto de la presentación: la escena manda, no el retrato */

.inicio {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 48px;
  align-items: center;
}

.inicio img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 30% 28%;
}

/* Enlaces de contacto en la banda azul y en el pie de contacto */

.franja span {
  display: inline-flex;
  gap: 18px;
  margin-left: 18px;
}

.franja a {
  color: #FFFFFF;
  text-underline-offset: 5px;
}

.redes {
  flex-wrap: wrap;
}

.telefono {
  margin-top: 14px;
  color: var(--tenue);
  font-size: 15px;
}

@media (max-width: 860px) {
  .inicio {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .inicio img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 640px) {
  .franja span {
    display: flex;
    justify-content: center;
    margin: 8px 0 0;
  }
}

/* Enlace a la versión en el otro idioma */

.menu .idioma {
  padding-left: 22px;
  border-left: 1px solid var(--raya);
  color: var(--azul);
}

@media (max-width: 640px) {
  .menu .idioma {
    padding-left: 14px;
  }
}

/* Página de publicaciones de LinkedIn (/linkedin/) */

.publicaciones {
  padding-top: 56px;
  padding-bottom: 96px;
}

.publicaciones h1 {
  font-family: var(--titulos);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

/* Una tarjeta propia por publicación: se ve aunque el navegador bloquee
   LinkedIn. Con el visor cargado, cada tarjeta mide 504 px como mucho. */
.entradas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: stretch;
  gap: 24px;
  margin-top: 36px;
}

.entradas.con-visor {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 504px));
  justify-content: center;
  align-items: start;
}

.entrada {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--raya);
  border-radius: 20px;
  background: var(--tarjeta);
  color: var(--texto);
}

.entrada[hidden] {
  display: none;
}

.entrada-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--tenue);
  font-size: 14px;
}

.entrada-sello {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--azul);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.publicaciones .entrada h2 {
  margin: 0;
  max-width: none;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--titulos);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
}

.entrada-cifra {
  margin: 0;
  color: var(--tenue);
  font-size: 15px;
}

.entrada-ir {
  margin: auto 0 0;
  padding-top: 4px;
  font-size: 15px;
  font-weight: 600;
}

.entrada iframe {
  display: block;
  width: 100%;
  border: 1px solid var(--raya);
  border-radius: 8px;
  background: var(--suave);
}

.visor-aviso {
  margin: 28px 0 0;
  padding: 20px 24px;
  border-radius: 20px;
  background: var(--tonal);
  color: var(--sobre-tonal);
  line-height: 1.5;
}

.visor-aviso p {
  margin: 0 0 16px;
}

.visor-aviso a {
  color: inherit;
}

.visor-aviso .boton {
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.visor-aviso[hidden] {
  display: none;
}

.entrada a,
.mas a {
  color: var(--azul);
  text-underline-offset: 4px;
}

.mas {
  margin-top: 28px;
  font-size: 15px;
  text-align: center;
}

@media (max-width: 640px) {
  .publicaciones {
    padding-top: 40px;
    padding-bottom: 72px;
  }

  .publicaciones h1 {
    font-size: 28px;
    letter-spacing: 0.14em;
  }
}

/* Arce Data Lab y Club Byte: dos tarjetas */

.marcas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  max-width: 760px;
  margin: 36px auto 0;
}

.marca-tarjeta {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 28px 30px;
  background: var(--suave);
  border-top: 4px solid var(--azul);
}

.marca-tarjeta.clubbyte {
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  border-top-color: #A94F0E;
}

.marca-tarjeta img {
  width: 104px;
  height: auto;
}

.marca-tarjeta h3,
.preguntas dt {
  font-family: var(--titulos);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.marca-tarjeta div {
  display: grid;
  gap: 12px;
}

/* Preguntas frecuentes */

.preguntas {
  max-width: 880px;
  margin: 36px auto 0;
}

.preguntas > div {
  padding: 20px 0;
  border-top: 1px solid var(--raya);
}

.preguntas > div:last-child {
  border-bottom: 1px solid var(--raya);
}

.preguntas dt {
  font-size: 20px;
  letter-spacing: 0.04em;
}

.preguntas dd {
  margin: 6px 0 0;
}

/* Página de cada proyecto */

.pagina-proyecto {
  margin-top: 18px !important;
  font-weight: 600;
}

.migas {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 28px 28px 0;
  color: var(--tenue);
  font-size: 14.5px;
}

.proyecto {
  max-width: 780px;
}

.proyecto h1 {
  font-family: var(--titulos);
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}

.proyecto > p,
.proyecto .caso {
  margin-top: 18px;
}

.proyecto-cabecera {
  display: grid;
  place-items: center;
  height: 140px;
  margin-bottom: 24px;
  background: var(--c);
}

.proyecto-cabecera svg {
  width: 68px;
  height: 68px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.proyecto-contacto {
  padding: 18px 20px;
  background: var(--suave);
}

.otros {
  max-width: 780px;
  margin: 28px auto 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 36px;
}

.otros li {
  break-inside: avoid;
  padding: 6px 0;
}

.otros span {
  color: var(--tenue);
  font-size: 14px;
}

.pie a {
  color: inherit;
}

/* Bit, el robot de Club Byte, en la esquina */

.bit {
  position: fixed;
  right: 18px;
  bottom: 14px;
  z-index: 60;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

.bit.listo {
  display: flex;
}

.bit-cuerpo {
  position: relative;
  width: 150px;
  height: 188px;
  pointer-events: auto;
}

.bit-foto {
  position: absolute;
  right: 22px;
  bottom: 6px;
  width: 92px;
  height: auto;
  cursor: pointer;
  animation: bit-flota 3.6s ease-in-out infinite;
}

.bit-lienzo {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.bit-bocadillo {
  position: relative;
  max-width: 250px;
  margin: 0 18px 2px 0;
  padding: 12px 15px;
  background: var(--tarjeta);
  color: var(--texto);
  border: 1px solid var(--raya);
  font-size: 14.5px;
  line-height: 1.45;
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 10px 28px -8px rgba(21, 32, 43, 0.18);
  pointer-events: auto;
}

.bit-bocadillo a {
  color: var(--azul);
  font-weight: 600;
  white-space: nowrap;
}

.bit-boton {
  position: absolute;
  right: 0;
  bottom: 150px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--raya);
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--tenue);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.2s;
}

.bit:hover .bit-boton,
.bit-boton:focus-visible {
  opacity: 1;
}

/* Oculto: queda un botón redondo con la cara de Bit para traerlo de vuelta. */
.bit.oculto .bit-cuerpo,
.bit.oculto .bit-bocadillo {
  display: none;
}

.bit.oculto .bit-boton {
  position: static;
  width: 52px;
  height: 52px;
  opacity: 1;
  background: #FFFFFF url('../img/bit.webp') center 30% / 34px auto no-repeat;
  box-shadow: 0 4px 14px rgba(21, 32, 43, 0.18);
}

/* Bit en movimiento (js/bit-paseo.js) */
.bit[class*="paseo-"] {
  will-change: transform;
}

.bit[class*="paseo-"] .bit-cuerpo {
  transform-origin: 50% 85%;
}

/* El bocadillo flota encima del cuerpo para que la caja no cambie de tamaño
   al hablar; a la izquierda o debajo según donde haya sitio. */
.bit[class*="paseo-"] .bit-bocadillo {
  position: absolute;
  right: 18px;
  bottom: 100%;
  width: max-content;
  margin: 0 0 -8px;
}

.bit.izq .bit-bocadillo {
  right: auto;
  left: 18px;
  border-radius: 14px 14px 14px 4px;
}

.bit.abajo .bit-bocadillo {
  bottom: auto;
  top: 100%;
  margin: -6px 0 0;
  border-radius: 4px 14px 14px 14px;
}

.bit.abajo.izq .bit-bocadillo {
  border-radius: 14px 4px 14px 14px;
}

.bit.izq .bit-boton {
  right: auto;
  left: 0;
}

@keyframes bit-flota {
  50% { transform: translateY(-6px); }
}

@media (max-width: 860px) {
  .marcas {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .marca-tarjeta {
    padding: 22px 20px;
  }

  .marca-tarjeta.clubbyte {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
  }

  .marca-tarjeta img {
    width: 72px;
  }

  .migas {
    padding: 20px 20px 0;
  }

  .otros {
    columns: 1;
  }

  .bit {
    right: 8px;
    bottom: 8px;
  }

  .bit-cuerpo {
    width: 96px;
    height: 120px;
  }

  .bit-foto {
    right: 14px;
    width: 60px;
  }

  .bit-boton {
    bottom: 96px;
    opacity: 1;
  }

  .bit-bocadillo {
    max-width: 210px;
    font-size: 13.5px;
  }
}

@media (hover: none) {
  .bit-boton {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bit-foto {
    animation: none;
  }
}

@media print {
  .bit {
    display: none !important;
  }
}

/* Servicios e infraestructura */

.servicios {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.servicio {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 26px 24px;
  border: 1px solid var(--raya);
  border-top: 4px solid var(--azul);
}

.servicio svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--azul);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.servicio h3 {
  font-family: var(--titulos);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.servicio .tec {
  margin-top: auto;
}

.infra-texto {
  max-width: 70ch;
  margin: 28px auto 0 !important;
  text-align: center;
}

.infra {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  max-width: 980px;
  margin: 30px auto 0;
}

.infra > div {
  padding: 16px 0;
  border-top: 1px solid var(--raya);
}

.infra dt {
  color: var(--tinta);
  font-family: var(--titulos);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.infra dd {
  margin: 4px 0 0;
}

@media (max-width: 980px) {
  .servicios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .servicios,
  .infra {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Cinta de automatización en 3D (js/cinta-arranque.js y bit/cinta.js).
   Sin 3D se ven solo los tres pasos, con flechas entre ellos. */
.cinta-escena {
  position: relative;
  margin-top: 30px;
}

.cinta-lienzo {
  display: block;
  width: 100%;
  height: 300px;
}

.cinta-pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.cinta-escena.en3d .cinta-pasos {
  margin-top: 6px;
}

.cinta-pasos li {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 0 12px;
  text-align: center;
  counter-increment: paso;
}

.cinta-pasos strong {
  font-family: var(--titulos);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tinta);
  text-transform: uppercase;
}

.cinta-pasos strong::before {
  content: counter(paso) ' · ';
  color: var(--azul);
}

.cinta-pasos span {
  color: var(--tenue);
  font-size: 15px;
  line-height: 1.45;
}

.cinta-escena:not(.en3d) .cinta-pasos li + li::before {
  content: '→';
  position: absolute;
  left: -14px;
  top: 0;
  color: var(--azul);
  font-size: 20px;
}

@media (max-width: 640px) {
  .cinta-lienzo {
    height: 220px;
  }

  .cinta-pasos {
    gap: 8px;
  }

  .cinta-pasos li {
    padding: 0 2px;
  }

  .cinta-pasos strong {
    font-size: 15px;
  }

  .cinta-pasos strong::before {
    content: counter(paso) '. ';
  }

  .cinta-pasos span {
    font-size: 13px;
  }
}

/* Escena 3D de «Mi infraestructura» (bit/infra.js). Solo se ve con 3D. */
.infra-escena {
  min-height: 1px; /* para que se note cuando entra en pantalla */
  margin: 30px auto 0;
}

.infra-escena:not(.en3d) .infra-leyenda {
  display: none;
}

.infra-lienzo {
  display: block;
  width: 100%;
  height: 320px;
  border-radius: 14px;
}

.infra-leyenda {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr 1fr;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--tenue);
  font-family: var(--titulos);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .infra-lienzo {
    height: 230px;
  }

  .infra-leyenda {
    font-size: 11.5px;
    letter-spacing: 0.04em;
  }
}

/* ── Plantilla común (la misma de las apps: propuestas 8 + 9, con toques del 7) ──
   Titulares en minúscula y sin espaciado, píldoras tonales en el menú, tarjetas
   blancas con radio 20–28 y las áreas como mosaico redondeado. */

h1, h2, h3,
.marca, .menu a, .inicio h1, .area strong, .area em, .franja, .bloque h2,
.filtro, .tesela-titulo, .ficha-cuerpo h3, .caso dt, .cuando, .cifras strong,
.correo, .redes a, .marca-tarjeta h3, .preguntas dt, .servicio h3, .infra dt,
.cinta-pasos strong, .infra-leyenda {
  text-transform: none;
  letter-spacing: 0;
}

.cabecera {
  padding-block: 10px;
  background: rgba(243, 246, 250, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 0;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 600;
}

.marca::before {
  content: 'HA';
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--azul);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
}

.marca span {
  margin-left: 0;
}

.menu {
  gap: 2px;
}

.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  color: #43474E;
  font-size: 15px;
  font-weight: 500;
}

.menu a:hover {
  background: var(--capa);
  color: var(--tinta);
}

.menu .idioma {
  margin-left: 8px;
  padding-left: 14px;
  border-left: 0;
  background: var(--tonal);
  color: var(--sobre-tonal);
}

.inicio h1 {
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.inicio img {
  border-radius: 28px;
}

/* Áreas: mosaico de cuatro tarjetas de color */
.areas {
  max-width: var(--ancho);
  height: auto;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  background: none;
  overflow: visible;
}

.area,
.area:first-child,
.area:last-child {
  margin: 0;
  padding: 32px 20px;
  border-radius: 28px;
  clip-path: none;
}

.area:hover,
.area:focus-visible {
  flex: none;
}

.area svg {
  width: 56px;
  height: 56px;
}

.area strong {
  font-size: 22px;
  font-weight: 600;
}

.area em {
  padding: 8px 16px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 14px;
  font-weight: 500;
}

.franja {
  max-width: calc(var(--ancho) - 56px);
  margin: 16px auto 0;
  padding: 18px 24px;
  border-radius: 24px;
  background: var(--tonal);
  color: var(--sobre-tonal);
  font-size: 17px;
  font-weight: 500;
}

.franja a {
  color: var(--sobre-tonal);
  font-weight: 600;
}

.bloque h2 {
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sub {
  color: #43474E;
}

/* Filtros como chips */
.filtros {
  gap: 8px;
}

.filtro {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #C3C7CF;
  border-radius: 8px;
  color: #43474E;
  font-size: 14px;
}

.filtro.activo {
  border-color: var(--tonal);
  background: var(--tonal);
  color: var(--sobre-tonal);
}

.filtro.activo::before {
  content: '✓ ';
}

.cuadricula {
  gap: 12px;
}

.tesela {
  border-radius: 24px;
}

.tesela-titulo {
  font-size: 18px;
}

.relieve::after {
  border-radius: inherit;
}

/* Tarjetas blancas */
.servicios {
  gap: 16px;
}

.servicio,
.servicio.relieve,
.marca-tarjeta,
.lista,
.preguntas,
.infra,
.cifras {
  border: 0;
  border-radius: 24px;
  background: var(--tarjeta);
}

.servicio {
  padding: 24px;
}

.servicio svg {
  width: 48px;
  height: 48px;
  padding: 10px;
  border-radius: 14px;
  background: var(--tonal);
  stroke: var(--sobre-tonal);
}

.servicio h3 {
  font-size: 20px;
}

.marca-tarjeta {
  padding: 28px;
}

.marca-tarjeta.clubbyte {
  background: #FFE3CC;
}

.marca-tarjeta h3,
.preguntas dt {
  font-size: 21px;
}

.lista,
.preguntas,
.infra,
.cifras {
  padding: 8px 28px;
}

.cifras {
  padding: 28px;
}

.lista > li,
.lista > div,
.preguntas > div,
.infra > div {
  border-top: 0;
  border-bottom: 1px solid #EEF1F5;
}

.lista > li:last-child,
.lista > div:last-child,
.preguntas > div:last-child {
  border-bottom: 0;
}

.infra > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.cuando {
  color: #43474E;
  font-size: 14px;
  font-weight: 500;
}

.infra dt {
  font-size: 17px;
}

.infra-lienzo {
  border-radius: 24px;
}

.cinta-pasos strong {
  font-size: 17px;
}

.infra-leyenda {
  font-size: 13px;
  font-weight: 500;
}

/* Ficha */
.ficha {
  border-radius: 28px;
  background: var(--tarjeta);
}

.ficha-cuerpo h3 {
  font-size: 28px;
  letter-spacing: -0.01em;
}

/* Contacto: botones redondeados */
.correo {
  font-weight: 650;
  letter-spacing: -0.01em;
}

.redes {
  gap: 8px;
}

.redes a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  background: var(--tarjeta);
  color: var(--tinta);
  font-size: 15px;
  text-decoration: none;
}

.redes a:hover {
  background: var(--tonal);
  color: var(--sobre-tonal);
}

.pie {
  border-top: 0;
}

@media (max-width: 980px) {
  .areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cabecera {
    padding: 10px 16px;
  }

  .menu a {
    min-height: 36px;
    padding: 0 10px;
    font-size: 14px;
  }

  .areas {
    padding: 0 16px;
    gap: 10px;
  }

  .area,
  .area:first-child,
  .area:last-child {
    padding: 22px 12px;
    border-radius: 22px;
  }

  .franja {
    margin: 10px 16px 0;
  }

  .lista,
  .preguntas,
  .infra {
    padding: 4px 18px;
  }

  .infra > div:nth-last-child(2) {
    border-bottom: 1px solid #EEF1F5;
  }

  .marca-tarjeta {
    padding: 22px;
  }
}

/* Ventas: botones de la portada, precio de cada servicio y nota de precios */
.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.boton {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 24px;
  background: var(--azul);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
}

.boton:hover,
.boton:focus-visible {
  background: var(--sobre-tonal);
}

.boton.secundario {
  background: var(--tonal);
  color: var(--sobre-tonal);
}

.servicio .precio {
  margin: 12px 0 0;
  color: var(--azul);
  font-weight: 600;
}

.servicios-nota {
  margin: 20px 0 0;
  color: var(--tenue);
  font-size: 15px;
  text-align: center;
}

/* ── Portada 2026, dentro de la plantilla común ──
   Mismos colores, Roboto Flex y tarjetas blancas de las apps. Cambia el orden
   (trabajo primero, precios en /servicios/), la presentación con datos clave y
   «Lo que puede ganar tu empresa» con escaleras animadas. */

/* Presentación */
.portada-dentro {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 64px 28px 0;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.75fr);
  gap: 56px;
  align-items: center;
}

.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: var(--tonal);
  color: var(--sobre-tonal);
  font-size: 14px;
  font-weight: 500;
}

.antetitulo::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1E8A63;
}

.portada h1 {
  margin-top: 20px;
  max-width: 18ch;
  font-size: clamp(36px, 5vw, 62px);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.portada h1 em {
  font-style: normal;
  color: var(--azul);
}

.portada .intro {
  max-width: 60ch;
  margin-top: 22px;
  font-size: 18px;
}

.portada .botones {
  margin-top: 30px;
}

.portada .boton {
  padding: 14px 26px;
}

/* Portada sin foto de fondo: solo el texto y el logo */
.portada {
  position: relative;
  overflow: hidden;
}


.portada-dentro {
  position: relative;
}

.portada-logo {
  padding: 28px 24px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.logo-arce {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.logo-hoja {
  fill: var(--azul);
}

.logo-nombre {
  fill: var(--tinta);
  stroke: #FFFFFF;
  stroke-width: 8px;
  paint-order: stroke;
  font-family: var(--titulos);
  font-size: 92px;
  font-weight: 800;
  letter-spacing: 4px;
}

.logo-lab {
  fill: var(--azul);
  font-family: var(--titulos);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 9px;
}

.logo-lema {
  fill: #43474E;
  font-family: var(--titulos);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 2.5px;
}

/* Logos propios en las tarjetas de proyecto y en su ficha */
.tesela-logo,
.ficha-cabecera .tesela-logo {
  display: block;
  width: 76px;
  height: 76px;
  padding: 8px;
  border-radius: 20px;
  background: #FFFFFF;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.tesela:hover .tesela-logo {
  transform: scale(1.08);
}

.ficha-cabecera .tesela-logo {
  width: 88px;
  height: 88px;
}

.datos-clave {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.datos-clave li {
  padding: 22px 24px;
  border-radius: 24px;
  background: var(--tarjeta);
}

.datos-clave strong {
  display: block;
  color: var(--tinta);
  font-size: 32px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.datos-clave span {
  display: block;
  margin-top: 6px;
  color: #43474E;
  font-size: 14px;
  line-height: 1.45;
}

/* Secciones de la portada: títulos a la izquierda */
.portadilla .bloque {
  padding-top: 96px;
}

.portadilla .bloque > h2,
.portadilla .bloque > .sub,
.pagina-servicios .bloque > h1,
.pagina-servicios .bloque > h2,
.pagina-servicios .bloque > .sub {
  text-align: left;
}

.portadilla .bloque > .sub {
  max-width: 62ch;
  margin-top: 8px;
  font-size: 17px;
}

.portadilla .filtros {
  justify-content: flex-start;
}

.portadilla .marcas,
.portadilla .lista,
.portadilla .cifras,
.portadilla .preguntas,
.portadilla .infra,
.pagina-servicios .preguntas {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.portadilla .cifras {
  text-align: left;
}

.portadilla .infra-texto {
  max-width: 64ch;
  margin: 28px 0 0 !important;
  text-align: left;
}

.portadilla .mas,
.pagina-servicios .mas {
  text-align: left;
}

/* Proyectos: tarjeta blanca con su color arriba */
.cuadricula {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tesela {
  aspect-ratio: auto;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  border-radius: 24px;
  background: var(--tarjeta);
  color: var(--tinta);
  text-align: left;
  transition: box-shadow 0.25s;
}

.tesela:hover,
.tesela:focus-visible {
  filter: none;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.1);
}

.tesela-cara {
  display: grid;
  place-items: center;
  height: 140px;
  background: var(--c);
}

.tesela svg,
.tesela.relieve svg {
  width: 60px;
  height: 60px;
  transform: none;
}

.tesela:hover svg,
.tesela.relieve:hover svg {
  transform: scale(1.1);
}

.tesela-titulo {
  padding: 18px 22px 2px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}

.tesela-tipo {
  position: static;
  padding: 0 22px 20px;
  color: #43474E;
  font-size: 13.5px;
}

.tesela-tipo::after {
  content: ' →';
  color: var(--azul);
}

.cuadricula:not(.abierta) .tesela[data-extra] {
  display: none;
}

.ver-todos {
  display: block;
  min-height: 44px;
  margin: 24px auto 0;
  padding: 0 24px;
  border: 0;
  border-radius: 22px;
  background: var(--tonal);
  color: var(--sobre-tonal);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.ver-todos:hover {
  background: #C2D8EE;
}

.ver-todos[hidden] {
  display: none;
}

/* Lo que puede ganar tu empresa: cada área es una escalera de tres peldaños
   que sube al verla (js/app.js pone .visto). */
.niveles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.nivel {
  padding: 26px 26px 24px;
  border-radius: 24px;
  background: var(--tarjeta);
}

.nivel-cabeza {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nivel-icono {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  background: var(--tonal);
}

.nivel-icono svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--sobre-tonal);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nivel h3 {
  font-size: 21px;
}

.escalera {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  height: 200px;
  margin: 22px 0 0;
  padding: 0 0 0;
  list-style: none;
  border-bottom: 2px solid var(--tinta);
}

.escalera li {
  display: flex;
  align-items: flex-end;
  height: 100%;
}

.peldano {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  height: calc(46% + var(--i) * 27%);
  padding: 12px 12px;
  border-radius: 14px 14px 0 0;
  background: #E6EBF2;
  color: var(--tinta);
  font-size: 13.5px;
  line-height: 1.3;
  transform-origin: bottom;
}

.escalera li:nth-child(2) .peldano {
  background: var(--tonal);
  color: var(--sobre-tonal);
}

.escalera li:nth-child(3) .peldano {
  background: var(--azul);
  color: #FFFFFF;
}

.peldano em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.75;
}

/* La animación solo se arma si hay JavaScript y nadie pide menos movimiento */
.animar .peldano {
  transform: scaleY(0);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i) * 0.18s);
}

.animar .peldano > * {
  opacity: 0;
  transition: opacity 0.4s ease calc(0.45s + var(--i) * 0.18s);
}

.animar .peldano {
  font-size: 13.5px;
}

.animar.visto .peldano {
  transform: scaleY(1);
}

.animar.visto .peldano > *,
.animar.visto .peldano {
  opacity: 1;
}

.animar .nivel-icono svg {
  transition: transform 0.8s ease;
}

.animar.visto .nivel-icono svg {
  animation: nivel-pulso 2.8s ease-in-out 0.9s infinite;
}

@keyframes nivel-pulso {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Contacto: tarjeta tonal al final */
.portadilla .contacto {
  margin-top: 96px;
  padding: 56px;
  border-radius: 28px;
  background: var(--tonal);
  color: var(--sobre-tonal);
  text-align: left;
}

.portadilla .contacto > h2,
.portadilla .contacto > .sub {
  color: var(--sobre-tonal);
}

.portadilla .contacto .correo {
  display: inline-block;
  margin-top: 22px;
  color: var(--sobre-tonal);
  font-size: clamp(26px, 3.4vw, 40px);
}

.portadilla .contacto .redes {
  justify-content: flex-start;
}

.portadilla .contacto .telefono {
  color: var(--sobre-tonal);
}

.contacto-servicios {
  margin-top: 22px;
  font-size: 15px;
  font-weight: 600;
}

.pie {
  margin-top: 40px;
}

/* Página de servicios */
.pagina-servicios .bloque > h1 {
  font-size: clamp(34px, 4.6vw, 50px);
  font-weight: 650;
  letter-spacing: -0.03em;
}

.pagina-servicios .servicios {
  margin-top: 32px;
}

.pagina-servicios .servicios-nota {
  text-align: left;
}

.pagina-servicios .preguntas {
  margin-top: 24px;
}

@media (max-width: 980px) {
  .portada-dentro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
    gap: 32px;
  }

  .cuadricula,
  .datos-clave {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .niveles {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .portada-dentro {
    grid-template-columns: minmax(0, 1fr);
    padding: 32px 16px 0;
    gap: 24px;
  }


  .portada-logo {
    grid-row: 1;
    width: min(240px, 72%);
    padding: 16px 14px;
    border-radius: 22px;
  }

  .portada h1 {
    margin-top: 16px;
  }

  .portada .intro {
    font-size: 16.5px;
  }

  .datos-clave {
    gap: 10px;
  }

  .datos-clave li {
    padding: 16px 16px;
    border-radius: 20px;
  }

  .datos-clave strong {
    font-size: 24px;
  }

  .portadilla .bloque {
    padding-top: 64px;
  }

  .cuadricula {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .tesela-cara {
    height: 104px;
  }

  .nivel {
    padding: 20px 18px;
  }

  .escalera {
    height: 230px;
    gap: 6px;
  }

  .peldano {
    padding: 10px 8px;
    font-size: 12.5px;
  }

  .portadilla .contacto {
    margin: 64px 0 0;
    padding: 36px 22px;
    border-radius: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animar .peldano,
  .animar .peldano > * {
    transform: none;
    opacity: 1;
    transition: none;
  }

  .animar.visto .nivel-icono svg {
    animation: none;
  }
}

/* Páginas legales */
.legal {
  max-width: 820px;
}

.legal h1 {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.legal h2 {
  margin-top: 32px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
}

.legal p,
.legal ul,
.legal ol {
  margin-top: 12px;
}

.legal ul,
.legal ol {
  padding-left: 22px;
}

.legal li + li {
  margin-top: 6px;
}

.pie br + a,
.pie a + a {
  font-size: 14px;
}

/* ── Pulido con las referencias (cabecera, botón de contacto y pie) ── */

.marca::before {
  content: none;
}

.hojita {
  width: auto;
  height: 34px;
  fill: var(--azul);
  flex: none;
}

.cabecera {
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cabecera.con-sombra {
  border-bottom-color: var(--raya);
  box-shadow: 0 6px 24px rgba(25, 28, 32, 0.06);
}

.menu {
  align-items: center;
}

.menu .menu-cta {
  margin-left: 6px;
  background: var(--azul);
  color: #FFFFFF;
  font-weight: 600;
}

.menu .menu-cta:hover,
.menu .menu-cta:focus-visible {
  background: var(--sobre-tonal);
  color: #FFFFFF;
}

.menu a[aria-current="page"] {
  background: var(--capa);
  color: var(--tinta);
}

.boton {
  transition: background-color 0.15s, transform 0.15s;
}

.boton:hover {
  transform: translateY(-1px);
}

.portadilla .contacto .botones {
  margin-top: 20px;
}

/* Pie en columnas */
.pie {
  margin-top: 72px;
  padding: 56px max(28px, calc((100vw - var(--ancho)) / 2 + 28px)) 28px;
  border-top: 1px solid var(--raya);
  background: var(--tarjeta);
  color: var(--tenue);
  font-size: 15px;
  text-align: left;
}

.pie-dentro {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 32px;
}

.pie-marca .marca {
  font-size: 19px;
}

.pie-marca p {
  max-width: 34ch;
  margin: 14px 0 0;
  line-height: 1.5;
}

.pie-col h2 {
  margin: 6px 0 14px;
  color: var(--tinta);
  font-size: 14px;
  font-weight: 650;
}

.pie-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie-col li + li {
  margin-top: 8px;
}

.pie a,
.pie br + a,
.pie a + a {
  color: var(--texto);
  font-size: inherit;
  text-decoration: none;
}

.pie a:hover {
  color: var(--azul);
  text-decoration: underline;
}

.pie-final {
  margin: 40px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--raya);
  font-size: 13px;
}

@media (max-width: 860px) {
  .pie-dentro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pie-marca {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .hojita {
    height: 28px;
  }

  .pie {
    padding: 40px 20px 24px;
  }

  .menu .menu-cta {
    margin-left: 0;
  }
}

/* En el móvil, Trayectoria y Arce Data Lab quedan en el pie: el menú cabe en una línea. */
@media (max-width: 640px) {
  .menu .menu-extra {
    display: none;
  }
}

/* Estados: cargando, error y vacío */
.entrada.cargando iframe {
  background: linear-gradient(100deg, var(--capa) 30%, var(--tarjeta) 50%, var(--capa) 70%) 0 0 / 300% 100%;
  animation: brillo 1.4s linear infinite;
}

.entrada-fallo {
  margin: 0;
  padding: 14px 18px;
  font-size: 15px;
  border-radius: 16px;
  background: var(--tonal);
  color: var(--sobre-tonal);
  line-height: 1.5;
}

.sin-proyectos {
  margin: 16px 0 0;
  padding: 28px;
  border-radius: 24px;
  background: var(--tarjeta);
  color: var(--texto);
  text-align: center;
}

.sin-proyectos[hidden] {
  display: none;
}

@keyframes brillo {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .entrada.cargando iframe {
    animation: none;
  }
}

/* Byte en modo libre: se esconde mientras algo pasa por debajo y, si no hay
   hueco en la pantalla, se queda asomado al borde. */
.bit {
  transition: opacity 0.18s;
}

.bit.apartado {
  opacity: 0;
  pointer-events: none;
}

.bit.apartado * {
  pointer-events: none !important;
}

.bit.asomado .bit-cuerpo {
  opacity: 0.85;
}

.bit.asomado .bit-bocadillo,
.bit.asomado .bit-boton {
  display: none;
}

.bit[class*="paseo-libre"] .bit-bocadillo {
  max-width: min(250px, calc(100vw - 32px));
}

/* Mensaje para Henry (doble clic en Byte) */
.byte-mensaje {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: var(--tarjeta);
  color: var(--texto);
  box-shadow: 0 24px 60px rgba(21, 32, 43, 0.28);
}

.byte-mensaje::backdrop {
  background: rgba(21, 32, 43, 0.45);
  backdrop-filter: blur(3px);
}

.byte-mensaje form {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 28px;  text-align: left;
}

.byte-mensaje h2 {
  margin: 0;
  padding-right: 32px;
  font-size: 22px;
}

.byte-mensaje .sub {
  margin: 0;
  font-size: 14.5px;
}

.byte-mensaje label {
  display: grid;
  gap: 6px;
  color: var(--tinta);
  font-size: 14px;
  font-weight: 600;
}

.byte-mensaje input,
.byte-mensaje textarea {
  padding: 11px 14px;
  border: 1px solid var(--raya);
  border-radius: 14px;
  background: var(--fondo);
  color: var(--tinta);
  font: inherit;
  font-weight: 400;
  resize: vertical;
}

.byte-mensaje input:focus-visible,
.byte-mensaje textarea:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 1px;
}

.byte-mensaje .botones {
  margin: 4px 0 0;
}

.byte-mensaje .boton {
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.byte-mensaje-cerrar {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--capa);
  color: var(--tinta);
  font-size: 20px;
  cursor: pointer;
}

.byte-estado {
  min-height: 0;
  margin: 0;
  font-size: 14px;
}

.byte-estado:empty {
  display: none;
}

.byte-estado.error {
  color: #B3261E;
}

.byte-estado.cargando::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border: 2px solid var(--tonal);
  border-top-color: var(--azul);
  border-radius: 50%;
  vertical-align: -1px;
  animation: girar 0.8s linear infinite;
}

.byte-estado.listo {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--tonal);
  color: var(--sobre-tonal);
}

.byte-fallo {
  display: block;
  margin-top: 6px;
  font-size: 13px;
}

.byte-estado .enlace {
  padding: 0;
  border: 0;
  background: none;
  color: var(--azul);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* Chispa: las escaleras suben con un pequeño rebote, el peldaño «Completo»
   lleva un brillo que pasa de vez en cuando y cada peldaño se eleva al pasar
   el ratón. Nada de esto se arma con «menos movimiento». */
@media (prefers-reduced-motion: no-preference) {
  .animar .peldano {
    transition: transform 0.8s cubic-bezier(0.3, 1.45, 0.5, 1) calc(var(--i) * 0.18s), translate 0.25s ease, box-shadow 0.25s ease;
  }

  .escalera li:nth-child(3) .peldano {
    position: relative;
    overflow: hidden;
  }

  .animar.visto .escalera li:nth-child(3) .peldano::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 50%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    animation: brillo-peldano 4.5s ease-in-out 1.4s infinite;
  }

  .peldano:hover {
    translate: 0 -4px;
    box-shadow: 0 10px 24px rgba(21, 32, 43, 0.14);
  }

  .datos-clave li {
    transition: translate 0.25s ease, box-shadow 0.25s ease;
  }

  .datos-clave li:hover {
    translate: 0 -3px;
    box-shadow: 0 10px 24px rgba(21, 32, 43, 0.08);
  }
}

@keyframes brillo-peldano {
  0%, 60% { transform: translateX(0); }
  100% { transform: translateX(420%); }
}

/* ── Páginas de cada servicio (/servicios/<id>/) y calculadora ── */
.servicio h3 a,
.servicio .precio a {
  color: inherit;
  text-decoration: none;
}

.servicio h3 a:hover,
.servicio .precio a:hover,
.servicio h3 a:focus-visible,
.servicio .precio a:focus-visible {
  text-decoration: underline;
}

.servicio .precio a {
  color: var(--azul);
}

.servicios-nota a {
  color: var(--azul);
  font-weight: 600;
}

.pagina-servicio .servicio-cabeza {
  padding-top: 24px;
}

.servicio-icono svg {
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  padding: 12px;
  border-radius: 16px;
  background: var(--tonal);
  fill: none;
  stroke: var(--sobre-tonal);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pagina-servicio .servicio-cabeza .sub {
  max-width: 68ch;
  margin-top: 14px;
  font-size: 18px;
}

.servicio-incluye {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.pasos-servicio {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.pasos-servicio li {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 24px;
  border-radius: 24px;
  background: var(--tarjeta);
  counter-increment: paso;
}

.pasos-servicio li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--azul);
  color: #FFFFFF;
  font-weight: 700;
}

.pasos-servicio strong {
  color: var(--tinta);
  font-size: 18px;
}

.otros-servicios {
  margin-top: 48px !important;
  font-size: 24px;
}

/* Calculadora */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 30px;
}

.calc-preguntas {
  display: grid;
  gap: 14px;
}

.calc fieldset {
  margin: 0;
  padding: 18px 22px 20px;
  border: 0;
  border-radius: 24px;
  background: var(--tarjeta);
}

.calc legend {
  float: left;
  width: 100%;
  margin-bottom: 12px;
  padding: 0;
  color: var(--tinta);
  font-weight: 600;
}

.calc label {
  display: inline-flex;
  margin: 0 8px 8px 0;
  cursor: pointer;
}

.calc input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.calc label span {
  padding: 8px 16px;
  border: 1px solid var(--raya);
  border-radius: 20px;
  background: var(--fondo);
  font-size: 15px;
  line-height: 1.35;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.calc label:hover span {
  border-color: var(--azul);
}

.calc input:checked + span {
  border-color: var(--azul);
  background: var(--azul);
  color: #FFFFFF;
}

.calc input:focus-visible + span {
  outline: 3px solid var(--tonal);
  outline-offset: 2px;
}

.calc-resultado {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 12px;
  padding: 28px;
  border-radius: 24px;
  background: var(--sobre-tonal);
  color: #FFFFFF;
}

.calc-etiqueta {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.calc-resultado output {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.15;
}

.calc-nota {
  font-size: 15px;
  opacity: 0.9;
}

.calc-resultado .boton {
  justify-self: start;
  background: #FFFFFF;
  color: var(--sobre-tonal);
}

.calc-resultado .boton:hover,
.calc-resultado .boton:focus-visible {
  background: var(--tonal);
}

/* Fichas de proyecto: probar en el laboratorio y servicio relacionado */
.probar {
  margin-top: 18px;
}

.proyecto-servicio,
.proyecto-siguiente {
  margin-top: 18px;
  font-weight: 600;
}

@media (max-width: 980px) {
  .pasos-servicio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calc {
    grid-template-columns: 1fr;
  }

  .calc-resultado {
    position: static;
  }
}

@media (max-width: 640px) {
  .pasos-servicio {
    grid-template-columns: 1fr;
  }

  .calc fieldset {
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calc label span {
    transition: none;
  }
}

.pagina-servicio .otros {
  max-width: none;
  margin-left: 0;
}

/* ¿Por qué trabajar conmigo? */
.porque-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.porque-lista li {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 24px;
  border-radius: 24px;
  background: var(--tarjeta);
}

.porque-lista strong {
  color: var(--tinta);
  font-size: 18px;
  line-height: 1.3;
}

/* Antes y después con deslizador */
.antes-ahora {
  position: relative;
  max-width: 820px;
  margin: 30px 0 0;
  overflow: hidden;
  border-radius: 24px;
  background: var(--tarjeta);
  aspect-ratio: 640 / 760;
}

.antes-ahora img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Sin JavaScript se ve el «ahora»; con él, el «antes» se recorta hasta la línea */
.antes-ahora .aa-antes {
  display: none;
}

.antes-ahora.activo .aa-antes {
  display: block;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.antes-ahora.activo::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  margin-left: -1.5px;
  background: var(--azul);
  box-shadow: 0 0 0 1px #FFFFFF;
  pointer-events: none;
}

.aa-etiqueta {
  position: absolute;
  top: 14px;
  padding: 4px 12px;
  border-radius: 14px;
  background: var(--sobre-tonal);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}

.aa-e-antes {
  left: 14px;
}

.aa-e-ahora {
  right: 14px;
}

.antes-ahora:not(.activo) .aa-e-antes {
  display: none;
}

.antes-ahora input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.antes-ahora:not(.activo) input {
  display: none;
}

.antes-ahora:has(input:focus-visible) {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}

@media (max-width: 980px) {
  .porque-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .porque-lista {
    grid-template-columns: 1fr;
  }
}

/* Proyectos (25/10/2026): los principales en tarjeta grande con su demo del
   laboratorio; el resto, en una lista corta que abre la misma ficha. */
.proyectos-grupo {
  margin: 36px 0 14px;
  color: var(--tinta);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.principales {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.principal {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: 24px;
  background: var(--tarjeta);
}

.principal.ancha {
  grid-column: 1 / -1;
  grid-template-rows: none;
  grid-template-columns: minmax(200px, 0.42fr) 1fr;
}

.principal-cara {
  display: grid;
  place-items: center;
  height: auto;
  min-height: 120px;
  background: var(--c);
}

.principal-cara svg {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.principal.ancha .principal-cara svg {
  width: 96px;
  height: 96px;
}

.principal-cuerpo {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 22px;
}

.principal-etiqueta {
  margin: 0 0 6px;
  color: var(--tenue);
  font-size: 13.5px;
}

.principal h3 {
  margin: 0 0 10px;
  color: var(--tinta);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}

.principal.ancha h3 {
  font-size: 26px;
}

.principal-cuerpo p {
  margin: 0 0 12px;
}

.principal-lab {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--fondo);
  font-size: 15px;
}

.principal-lab b {
  color: var(--tinta);
  font-weight: 600;
}

.principal-rel {
  font-size: 14.5px;
  color: var(--tenue);
}

.principal-botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: auto !important;
  padding-top: 4px;
}

.ver-caso {
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--azul);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.ver-caso:hover,
.ver-caso:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.minis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.minis li[hidden] {
  display: none;
}

.mini {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 8px 14px 8px 8px;
  border: 0;
  border-radius: 16px;
  background: var(--tarjeta);
  color: var(--tinta);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.mini:hover,
.mini:focus-visible {
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
}

.mini .tesela-cara {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--c);
}

.mini svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini .tesela-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.mini-texto {
  display: grid;
  min-width: 0;
}

.mini-texto b {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.25;
}

.mini-texto span {
  color: var(--tenue);
  font-size: 13px;
}

@media (max-width: 980px) {
  .minis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .principales,
  .minis {
    grid-template-columns: 1fr;
  }

  .principal.ancha {
    grid-template-columns: none;
    grid-template-rows: auto 1fr;
  }

  .principal-cara {
    min-height: 96px;
  }

  .principal.ancha .principal-cara svg {
    width: 60px;
    height: 60px;
  }

  .principal.ancha h3 {
    font-size: 21px;
  }
}

/* ---------- Portada simple (26/10/2026) ----------
   Un mensaje por bloque, titulares grandes y mucho aire. Fondo blanco y una
   banda tostada; el único botón es «Pide presupuesto». */
body:has(.simple) {
  background: #FFFFFF;
}

.simple .bloque.simple-bloque {
  padding-top: 112px;
}

.simple .bloque > .titular,
.simple .titular {
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-align: center;
  text-transform: none;
}

.simple .bloque > .sub.centrada,
.simple .sub.centrada {
  max-width: 62ch;
  margin: 16px auto 0;
  font-size: 18px;
  text-align: center;
}

.boton.grande {
  padding: 14px 28px;
  font-size: 17px;
}

.boton.contorno {
  border: 1.5px solid var(--azul);
  background: transparent;
  color: var(--azul);
}

.boton.contorno:hover,
.boton.contorno:focus-visible {
  background: var(--tonal);
  color: var(--sobre-tonal);
}

.botones.centrados {
  justify-content: center;
}

.enlace-flecha {
  margin-top: 14px;
  font-weight: 600;
}

.enlace-flecha a {
  text-decoration: none;
}

.enlace-flecha a:hover {
  text-decoration: underline;
}

/* Carrusel del principio */
.heroe {
  position: relative;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 56px 72px 0;
}

.heroe-diapo {
  display: none;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 56px;
  min-height: 460px;
}

.heroe-diapo.activa {
  display: grid;
}

.heroe.con-js .heroe-diapo.activa {
  animation: aparecer 0.5s ease;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.heroe-imagen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
  box-shadow: 0 18px 48px rgba(15, 35, 60, 0.12);
}
.heroe-imagen img[src*="cabecera"] { border-radius: 0; box-shadow: none; }

.heroe-logo {
  padding: 40px 36px;
  border-radius: 28px;
  background: var(--fondo);
}

.heroe-ante {
  color: var(--tinta);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.heroe h1,
.heroe-titulo {
  margin-top: 16px;
  color: var(--tinta);
  font-family: var(--titulos);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.heroe-intro {
  max-width: 46ch;
  margin-top: 20px;
  color: #43474E;
  font-size: 18px;
}

.heroe .botones {
  margin-top: 32px;
}

.heroe-flecha {
  position: absolute;
  top: calc(56px + 230px);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #3A3F45;
  color: #FFFFFF;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.heroe-flecha:hover,
.heroe-flecha:focus-visible {
  background: var(--azul);
}

.heroe-ant { left: 16px; }
.heroe-sig { right: 16px; }

.heroe-mandos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
}

.heroe-punto {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1.5px solid #3A3F45;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.heroe-punto.activo {
  background: #3A3F45;
}

.heroe-pausa {
  margin-left: 10px;
  padding: 2px 8px;
  border: 0;
  border-left: 1px solid var(--raya);
  background: transparent;
  color: #3A3F45;
  font-size: 13px;
  cursor: pointer;
}

/* «Mira a Ada trabajar»: pestañas como las de LinkedIn Ads */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 36px auto 0;
  padding: 8px;
  border-radius: 999px;
  background: #EDF1F6;
}

.pestana {
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--azul);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.pestana[aria-selected="true"] {
  background: #FFFFFF;
  color: var(--tinta);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(15, 35, 60, 0.12);
}

.oficina {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
  gap: 64px;
  margin-top: 48px;
}

.oficina[hidden] {
  display: none;
}

.oficina img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

.oficina-texto h3 {
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 500;
}

.oficina-texto p {
  margin-top: 16px;
  font-size: 17px;
}

.oficina-texto .nota {
  color: var(--tenue);
  font-size: 14px;
}

/* «Qué hacemos»: tres columnas con icono */
.tres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 56px;
  text-align: center;
}

.tres-icono {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--tonal);
  color: var(--azul);
}

.tres-item:nth-child(2) .tres-icono { background: #FBE3C8; color: #A94F0E; }
.tres-item:nth-child(3) .tres-icono { background: #D6EBE5; color: #2C6259; }

.tres-icono svg {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tres-item h3 {
  margin-top: 24px;
  font-size: 24px;
  font-weight: 700;
}

.tres-item p {
  max-width: 32ch;
  margin: 12px auto 0;
}

.simple #que-hacemos .botones {
  margin-top: 48px;
}

/* «Cómo empezamos»: banda tostada con tres pasos */
.simple .bloque.tostado {
  max-width: none;
  margin-top: 112px;
  padding: 88px 28px;
  background: #EEE9E3;
}

.pasos-simple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: var(--ancho);
  margin: 48px auto 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.paso-num {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tinta);
  color: #FFFFFF;
  font-weight: 700;
}

.pasos-simple h3 {
  margin-top: 16px;
  font-size: 21px;
  font-weight: 700;
}

.pasos-simple p {
  margin-top: 8px;
}

/* Proyectos destacados: tarjetas como los «recursos» */
.recursos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}

.recurso-imagen {
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: var(--fondo);
  aspect-ratio: 16 / 9;
}

.recurso-imagen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  transition: transform 0.3s;
}

.recurso:hover .recurso-imagen img {
  transform: scale(1.03);
}

.recurso h3 {
  margin-top: 22px;
  font-size: 21px;
  font-weight: 700;
}

.recurso h3 a {
  color: var(--tinta);
  text-decoration: none;
}

.recurso p {
  margin-top: 10px;
}

.recurso > p:not(.recurso-enlaces) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.recurso-enlaces {
  margin-top: 14px;
}

.recurso-enlaces {
  display: flex;
  gap: 20px;
  font-weight: 600;
}

.recurso-enlaces a {
  text-decoration: none;
}

.simple #proyectos .botones {
  margin-top: 44px;
}

/* Preguntas en acordeón */
.acordeon {
  max-width: 880px;
  margin: 40px auto 0;
  border-top: 1px solid var(--raya);
}

.acordeon details {
  border-bottom: 1px solid var(--raya);
}

.acordeon summary {
  position: relative;
  padding: 22px 40px 22px 4px;
  color: var(--tinta);
  font-size: 19px;
  cursor: pointer;
  list-style: none;
}

.acordeon summary::-webkit-details-marker {
  display: none;
}

.acordeon summary::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s;
}

.acordeon details[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.acordeon details p {
  padding: 0 4px 22px;
}

/* Bloque final oscuro con dos tarjetas */
.final {
  margin-top: 112px;
  padding: 56px 28px;
  background: #4A433D;
}

.final-dentro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: var(--ancho);
  margin: 0 auto;
}

.final-tarjeta {
  padding: 52px 56px;
  border-radius: 12px;
  background: #FFFFFF;
}

.final-tarjeta h2 {
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-align: left;
  text-transform: none;
}

.final-tarjeta > p {
  margin-top: 18px;
}

.final-otros {
  color: var(--tenue);
  font-size: 15px;
}

.simple + .pie,
.simple ~ .pie {
  margin-top: 0;
}

/* Sobre mí y Todos los proyectos: títulos de página */
.portadilla .bloque > h1 {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 600;
}

@media (max-width: 980px) {
  .heroe { padding: 32px 28px 0; }
  .heroe-diapo { grid-template-columns: 1fr; gap: 32px; min-height: 0; }
  .heroe-imagen { order: 2; }
  .heroe-flecha { display: none; }
  .oficina { grid-template-columns: 1fr; gap: 28px; }
  .tres, .pasos-simple, .recursos { grid-template-columns: 1fr; gap: 44px; }
  .final-dentro { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .heroe { padding: 24px 16px 0; }
  .simple .bloque.simple-bloque { padding: 80px 16px 0; }
  .simple .bloque.tostado { margin-top: 80px; padding: 64px 16px; }
  .final { margin-top: 80px; padding: 40px 16px; }
  .final-tarjeta { padding: 32px 24px; }
  .pestanas { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: auto; margin-left: -16px; margin-right: -16px; border-radius: 0; scrollbar-width: none; }
  .pestana { flex: none; padding: 8px 14px; font-size: 15px; }
  .heroe-logo { max-width: 300px; padding: 20px 18px; }
  .tres-icono { width: 88px; height: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .heroe.con-js .heroe-diapo.activa { animation: none; }
  .recurso-imagen img { transition: none; }
}

/* Lotes de análisis (/servicios/power-bi/) */
.lotes-intro { max-width: 68ch; margin-top: 10px; }
.lotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.lote {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 24px;
  border-radius: 24px;
  background: var(--tarjeta);
  border: 1px solid var(--raya);
  min-width: 0;
}
.lote h3 { margin: 0; font-size: 20px; }
.lote-para { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue); }
.lote-pregunta { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }
.lote ul { margin: 4px 0 0; padding-left: 18px; color: var(--texto); font-size: 15px; display: grid; gap: 6px; }
.lote .enlace-flecha { margin: 8px 0 0; }

/* Sobre mí: página de carrera tipo CV (/sobre-mi/) */
.cv .cv-cabeza {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 40px;
  align-items: start;
}
.cv-foto {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tonal);
}
.cv-antetitulo {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--azul);
}
.cv .cv-cabeza h1 { margin: 0; }
.cv-puesto-actual {
  margin: 10px 0 0;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--tinta);
}
.cv-lugar { margin: 6px 0 0; color: var(--tenue); }
.cv-resumen { max-width: 68ch; margin: 20px 0 0; font-size: 17px; line-height: 1.6; }
.cv-botones { margin-top: 24px; flex-wrap: wrap; }
.cv-botones button { font-family: inherit; cursor: pointer; }
.cv-solo-papel { display: none; }

.cv-datos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
}
.cv-datos > div {
  padding: 22px 24px;
  border-radius: 24px;
  background: var(--tarjeta);
}
.cv-datos dt { font-size: 34px; font-weight: 600; color: var(--azul); }
.cv-datos dd { margin: 4px 0 0; color: var(--texto); font-size: 15px; }

.cv-lista > li { display: grid; grid-template-columns: 190px 1fr; gap: 24px; }
.cv-lista .cuando { margin: 0; }
.cv-lista ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--texto); }

.cv-competencias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.cv-competencias > div { padding: 22px 24px; border-radius: 24px; background: var(--tarjeta); }
.cv-competencias h3 { margin: 0; font-size: 19px; }
.cv-competencias p { margin: 6px 0 0; color: var(--texto); font-size: 15px; }
.cv-herramientas-titulo { margin: 36px 0 0; font-size: 21px; }
.cv-herramientas { display: grid; gap: 14px; margin: 16px 0 0; }
.cv-herramientas > div { display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: start; }
.cv-herramientas dt { font-weight: 600; color: var(--tinta); padding-top: 4px; }
.cv-herramientas dd { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cv-herramientas dd span {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--tonal);
  color: var(--sobre-tonal);
  font-size: 14px;
}

.cv-texto { max-width: 68ch; margin-top: 16px; }
.cv-proyectos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.cv-proyecto {
  display: block;
  padding: 22px 24px;
  border-radius: 24px;
  background: var(--tarjeta);
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color .2s;
}
.cv-proyecto:hover, .cv-proyecto:focus-visible { border-color: var(--azul); }
.cv-proyecto h3 { margin: 0; font-size: 19px; color: var(--azul); }
.cv-proyecto p { margin: 6px 0 0; font-size: 15px; color: var(--texto); }

@media (max-width: 980px) {
  .cv-datos { grid-template-columns: repeat(2, 1fr); }
  .cv-competencias { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cv .cv-cabeza { grid-template-columns: 1fr; gap: 20px; }
  .cv-foto { width: 112px; height: 112px; }
  .cv-datos { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cv-datos > div { padding: 16px; }
  .cv-datos dt { font-size: 28px; }
  .cv-competencias { grid-template-columns: 1fr; }
  .cv-lista > li, .cv-herramientas > div { grid-template-columns: 1fr; gap: 6px; }
}

/* Al guardar en PDF o imprimir: solo el CV, en blanco y compacto */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .cabecera, .pie, .bit, .saltar, .cv-botones, .cv .mas, .cv-contacto, #divulgacion { display: none !important; }
  .cv .bloque { padding: 0 !important; margin: 0 0 14pt !important; max-width: none; }
  .cv-solo-papel { display: block; margin: 8pt 0 0; font-size: 9.5pt; color: #333; }
  .cv-foto { width: 90px; height: 90px; }
  .cv .cv-cabeza { grid-template-columns: 90px 1fr; gap: 18px; }
  .cv-resumen { font-size: 10.5pt; margin-top: 8pt; }
  .cv-datos > div, .cv-competencias > div, .cv-proyecto, .lista { background: none; border: 1px solid #ddd; border-radius: 8px; padding: 8pt 10pt; }
  .cv-datos dt { font-size: 18pt; }
  .cv h2 { font-size: 15pt; margin: 0; }
  .cv .sub { display: none; }
  .cv-lista > li { break-inside: avoid; grid-template-columns: 120px 1fr; gap: 12px; padding: 6pt 0; }
  .cv-herramientas > div { grid-template-columns: 120px 1fr; gap: 12px; }
  .cv-herramientas dd span { background: none; border: 1px solid #bbb; color: #000; padding: 1px 8px; font-size: 9pt; }
  .cv-competencias { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cv-proyectos { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cv-datos { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  a { color: inherit; text-decoration: none; }
}

/* Selector de idioma de la cabecera: ES · EN · 中文 */
.menu .idiomas {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  padding: 3px;
  border-radius: 22px;
  background: var(--tonal);
}

.menu .idiomas a {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 18px;
  color: var(--sobre-tonal);
  font-size: 14px;
  font-weight: 600;
}

.menu .idiomas a:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--tinta);
}

.menu .idiomas a[aria-current="true"] {
  background: #FFFFFF;
  color: var(--tinta);
  box-shadow: 0 1px 3px rgba(25, 28, 32, 0.12);
}

@media (max-width: 640px) {
  .menu .idiomas {
    margin-left: 0;
  }

  .menu .idiomas a {
    min-height: 30px;
    padding: 0 8px;
    font-size: 13px;
  }
}

/* Versión en chino: Roboto Flex no tiene esos caracteres; se usan los del sistema. */
:root:lang(zh) {
  --titulos: 'Roboto Flex', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', system-ui, sans-serif;
  --cuerpo: 'Roboto Flex', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', system-ui, sans-serif;
}

:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 {
  letter-spacing: 0;
}

/* ---------- Sellos de proyecto (01/11/2026) ----------
   Una sola pieza para todos los proyectos: cuadrado claro con borde y, dentro,
   el logo real, el monograma o el pictograma en el color del proyecto. Las
   tarjetas ya no llevan bloques de color: solo una raya fina arriba. */
.sello {
  display: grid;
  flex: none;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--raya, #DCE3EB);
  border-radius: 16px;
  background: #FFFFFF;
  color: var(--c, var(--azul));
  overflow: hidden;
}

.sello svg,
.principal-cara svg,
.mini .sello svg {
  width: 60%;
  height: 60%;
  fill: none;
  stroke: var(--c, var(--azul));
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sello .tesela-logo,
.mini .sello .tesela-logo,
.ficha-cabecera .sello .tesela-logo {
  width: 80%;
  height: 80%;
  padding: 0;
  border-radius: 10px;
  background: none;
  object-fit: contain;
}

.monograma {
  font-family: var(--titulos, inherit);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--c, var(--azul));
}

.principal {
  grid-template-rows: none;
  border-top: 4px solid var(--c);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.principal.ancha {
  grid-template-columns: none;
}

.principal-cab {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.principal-cab .principal-etiqueta {
  margin: 0;
}

.principal.ancha .sello {
  width: 72px;
  height: 72px;
}

.principal.ancha .principal-cuerpo {
  padding: 26px 30px;
}

.mini .tesela-cara.sello {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #FFFFFF;
}

.mini .monograma {
  font-size: 17px;
}

.mini .sello svg {
  width: 26px;
  height: 26px;
}

.mini {
  box-shadow: inset 3px 0 0 var(--c);
}

.ficha-cabecera,
.proyecto-cabecera {
  height: 130px;
  background: color-mix(in srgb, var(--c, var(--azul)) 10%, #FFFFFF);
  border-top: 4px solid var(--c, var(--azul));
}

.ficha-cabecera .sello,
.proyecto-cabecera .sello {
  width: 84px;
  height: 84px;
  border-radius: 20px;
}

.ficha-cabecera .monograma,
.proyecto-cabecera .monograma {
  font-size: 34px;
}

.ficha-cabecera .sello svg,
.proyecto-cabecera .sello svg {
  width: 56%;
  height: 56%;
  stroke: var(--c, var(--azul));
  stroke-width: 2;
}

/* ---------- Novedades (01/11/2026) ----------
   En qué trabajamos, lo último, dónde publicamos y LinkedIn en una página. */
.novedades {
  padding-top: 56px;
  padding-bottom: 24px;
}

.novedades h1 {
  margin-bottom: 8px;
}

.ahora {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ahora-item {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--raya);
  border-top: 4px solid var(--c, var(--azul));
  border-radius: 18px;
  background: var(--tarjeta);
  color: var(--texto);
  text-decoration: none;
  transition: box-shadow 0.2s;
}

.ahora-item:hover,
.ahora-item:focus-visible {
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.1);
}

.ahora-item b {
  color: var(--tinta);
  font-size: 17px;
  font-weight: 600;
}

.ahora-item span {
  color: var(--tenue);
  font-size: 15px;
}

/* «Lo último»: tarjetas con el color de cada producto y su vídeo o imagen.
   La primera ocupa dos columnas. Las pinta js/novedades.js (al construir y
   en el navegador con lo que da n8n). */
.novedades-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.nov {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--raya);
  border-radius: 22px;
  background: var(--tarjeta);
  transition: box-shadow 0.2s, transform 0.2s;
}

.nov:hover {
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
  transform: translateY(-2px);
}

.nov-media {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 280px;
  padding: 22px 22px 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(255, 255, 255, 0.28), transparent 60%),
    linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 55%, #0B1220));
}

.nov-movil {
  width: auto;
  height: 100%;
  aspect-ratio: 9 / 17;
  padding: 7px 7px 0;
  border-radius: 26px 26px 0 0;
  background: #0B1220;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.nov-movil video,
.nov-movil img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 20px 20px 0 0;
  background: #0B1220;
  object-fit: cover;
  object-position: top;
}

.nov-ventana {
  width: 100%;
  max-width: 420px;
  height: 100%;
  padding-top: 22px;
  border-radius: 12px 12px 0 0;
  background: #fff linear-gradient(#E6EBF2, #E6EBF2) top / 100% 22px no-repeat;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
}

.nov-ventana::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F87171;
  box-shadow: 10px 0 #FBBF24, 20px 0 #34D399;
}

.nov-ventana img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.nov-marca {
  align-self: center;
  margin-bottom: 22px;
  color: #fff;
  font-family: var(--titulos);
  font-size: 40px;
  font-weight: 700;
  text-transform: capitalize;
  opacity: 0.9;
}

.nov-cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 20px;
  border-top: 4px solid var(--c);
}

.nov-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--tenue);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.nov-tipo {
  padding: 3px 10px;
  border-radius: 999px;
  background: #DBEAFE;
  color: #1E40AF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nov[data-tipo="nuevo"] .nov-tipo { background: #DCFCE7; color: #166534; }
.nov[data-tipo="en_preparacion"] .nov-tipo { background: #FEF3C7; color: #92400E; }
.nov[data-tipo="video"] .nov-tipo { background: #FEE2E2; color: #991B1B; }
.nov[data-tipo="capitulo"] .nov-tipo { background: #EDE9FE; color: #5B21B6; }

.nov h3 {
  margin: 4px 0 0;
  color: var(--tinta);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.3;
}

.nov p {
  margin: 0;
}

.nov-cuerpo > p:not(.nov-meta) {
  color: var(--texto);
  font-size: 15px;
}

.nov-ir {
  margin-top: auto;
  padding-top: 8px;
  color: var(--c);
  font-weight: 650;
  text-decoration: none;
}

.nov-ir:hover {
  text-decoration: underline;
}

/* La primera, la más reciente, en grande: medio a la izquierda, texto a la
   derecha. Si la última deja un hueco en la fila, también ocupa dos. */
.novedades-lista > .nov:first-child,
.novedades-lista > .nov:last-child:nth-child(3n+1) {
  grid-column: span 2;
  flex-direction: row;
}

.novedades-lista > .nov:first-child .nov-media,
.novedades-lista > .nov:last-child:nth-child(3n+1) .nov-media {
  flex: 0 0 46%;
  height: auto;
  min-height: 360px;
}

.novedades-lista > .nov:first-child .nov-media > div,
.novedades-lista > .nov:last-child:nth-child(3n+1) .nov-media > div {
  height: 338px;
}

.novedades-lista > .nov:first-child .nov-cuerpo,
.novedades-lista > .nov:last-child:nth-child(3n+1) .nov-cuerpo {
  justify-content: center;
  padding: 28px;
  border-top: 0;
  border-left: 4px solid var(--c);
}

.novedades-lista > .nov:first-child h3 {
  font-size: 23px;
}

@media (max-width: 960px) {
  .novedades-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .novedades-lista { grid-template-columns: 1fr; }
  .novedades-lista > .nov:first-child,
  .novedades-lista > .nov:last-child:nth-child(3n+1) { grid-column: auto; flex-direction: column; }
  .novedades-lista > .nov:first-child .nov-media,
  .novedades-lista > .nov:last-child:nth-child(3n+1) .nov-media { flex: none; height: 300px; min-height: 0; }
  .novedades-lista > .nov:first-child .nov-media > div,
  .novedades-lista > .nov:last-child:nth-child(3n+1) .nov-media > div { height: 100%; }
  .novedades-lista > .nov:first-child .nov-cuerpo,
  .novedades-lista > .nov:last-child:nth-child(3n+1) .nov-cuerpo { padding: 18px 20px 20px; border-left: 0; border-top: 4px solid var(--c); }
  .novedades-lista > .nov:first-child h3 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .nov, .nov:hover { transition: none; transform: none; }
}

.canales {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.canales a {
  display: grid;
  gap: 2px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--raya);
  border-radius: 16px;
  background: var(--tarjeta);
  color: var(--texto);
  text-decoration: none;
  transition: box-shadow 0.2s;
}

.canales a:hover,
.canales a:focus-visible {
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.1);
}

.canal-red {
  color: var(--tenue);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.canales b {
  color: var(--tinta);
  font-size: 17px;
  font-weight: 600;
}

.canales span:not(.canal-red):not(.canal-ir) {
  color: var(--tenue);
  font-size: 14.5px;
}

.canal-ir {
  margin-top: 6px;
  color: var(--azul);
  font-size: 14.5px;
  font-weight: 600;
}

.novedades + .publicaciones {
  padding-top: 24px;
}

.publicaciones > h2 {
  margin-bottom: 4px;
}

.publicaciones .entrada h3 {
  margin: 0;
  color: var(--tinta);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 860px) {
  .ahora,
  .canales {
    grid-template-columns: 1fr;
  }
}

/* Con «Novedades» en el menú, un poco menos de aire entre enlaces para que
   la cabecera siga en una línea. */
.cabecera .menu a {
  padding: 0 10px;
}

.novedades .sub,
.novedades h2,
.publicaciones > h2,
.publicaciones > .sub {
  text-align: left;
}

/* La cabecera de la ficha ya es clara: la X, en oscuro. */
.ficha-cerrar {
  background: #FFFFFF;
  color: var(--tinta);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
}

.ficha-cerrar:hover,
.ficha-cerrar:focus-visible {
  background: var(--capa);
}

/* Trampa para robots del cuadro de Byte: invisible para las personas. */
.byte-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Cabecera en una sola línea en escritorio (01/11/2026). El ancho se mide sin
   la barra de scroll (100 %, no 100vw) y es algo más ancho que el contenido;
   el lema «automatización · IA · datos» se quita antes de que el menú salte
   a una segunda línea. */
.cabecera {
  padding-inline: max(20px, calc((100% - 1240px) / 2 + 20px));
}

@media (min-width: 1100px) {
  .cabecera,
  .cabecera .menu {
    flex-wrap: nowrap;
  }

  .cabecera .menu a {
    white-space: nowrap;
  }
}

@media (max-width: 1240px) {
  .marca span {
    display: none;
  }
}

/* Menos aire entre bloques. */
.bloque {
  padding-top: 64px;
}

.heroe {
  padding-top: 36px;
}

.heroe-mandos {
  margin-top: 24px;
}

@media (max-width: 640px) {
  .bloque {
    padding-top: 48px;
  }

  .heroe {
    padding-top: 20px;
  }
}

/* Pantallas grandes: el contenido aprovecha más ancho a los lados (01/11/2026). */
@media (min-width: 1500px) {
  :root {
    --ancho: 1360px;
  }

  .cabecera {
    padding-inline: calc((100% - 1400px) / 2 + 20px);
  }
}

@media (min-width: 1800px) {
  :root {
    --ancho: 1480px;
  }

  .cabecera {
    padding-inline: calc((100% - 1520px) / 2 + 20px);
  }
}

/* Móvil: todo el menú en una fila que se desliza de lado (01/11/2026), así
   Laboratorio, Novedades y Sobre mí también están a mano. */
@media (max-width: 640px) {
  .cabecera .menu .menu-extra {
    display: inline-flex;
  }

  .cabecera .menu {
    flex-wrap: nowrap;
    width: calc(100% + 40px);
    margin: 0 -20px;
    padding: 0 20px 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }

  .cabecera .menu::-webkit-scrollbar {
    display: none;
  }

  .cabecera .menu > *,
  .cabecera .menu a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Vídeo de YouTube en una página de servicio: miniatura propia que enlaza al vídeo */
.video-servicio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.video-mini {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--raya);
  background: var(--tarjeta);
}
.video-mini img { display: block; width: 100%; height: auto; }
.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .72);
  transition: background .2s;
}
.video-play::after {
  content: '';
  position: absolute;
  left: 28px;
  top: 14px;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
}
.video-mini:hover .video-play, .video-mini:focus-visible .video-play { background: #c4302b; }
.video-servicio h2 { margin-top: 0; }
@media (max-width: 760px) {
  .video-servicio { grid-template-columns: 1fr; gap: 20px; }
}
.video-servicio .botones { justify-content: center; }

/* Captura de un proyecto (p. ej. el informe de Power BI de nifi-oee) */
.proyecto-captura {
  margin: 24px 0 0;
}

.proyecto-captura img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--raya);
  border-radius: 12px;
  background: var(--tarjeta);
}

.proyecto-captura figcaption {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--tenue);
}