/* ====================================================
   VARIANTE B2 · "NOMBRE DETRÁS" · PULIDO PROFESIONAL
   Dirección estética: Técnico y preciso (plano/ficha técnica)
   1. Fondo con profundidad técnica, trama de plano y viñeta
   2. Alineación óptica estricta del bloque izquierdo
   3. Nombre gigante con acabado metálico de plano
   4. Silueta de Arnau integrada y limpia a la derecha
   5. Oficio con detalle de cota técnica y tipografía ajustada
   ==================================================== */

:root {
  --hero-b2-left: max(var(--gutter), calc((100vw - 1100px) / 2 + var(--gutter)));
  --hero-b2-accent: #8fb0ff;
  --hero-b2-accent-deep: #5b8cff;
  --im-contact: calc(100vh - 91px);
  --im-x: 50%;
}

.hero-b2 {
  background-color: #0b1420;
  position: relative;
  overflow: hidden;
  /* Fondo técnico de taller: halo tenue tras la silueta y viñeta perimetral */
  background-image:
    radial-gradient(circle 560px at 78% 54%, rgba(91, 140, 255, 0.08) 0%, rgba(31, 85, 224, 0.02) 55%, transparent 75%),
    radial-gradient(ellipse 110% 90% at 50% 30%, transparent 62%, rgba(5, 10, 16, 0.75) 100%);
  background-size: 100% 100%;
  background-position: center;
}

@media (min-width: 960px) {
  .hero-b2 {
    min-height: calc(100svh - 81px);
    height: calc(100svh - 81px);
    box-sizing: border-box;
  }
}

/* Anulación de la rejilla heredada para preservar estructura de 1 columna */
.hero-b2 .hero-in,
.hero-b2-in {
  display: block !important;
  grid-template-columns: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  width: 100%;
}

/* Utilidad accesible para h1 oculto */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Marcas de registro técnico (crucetas de cota de plano) en esquinas útiles */
.hero-b2-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  opacity: 0.28;
}

.hero-b2-corner-tl {
  top: calc(var(--bar-h, 104px) + 1.2rem);
  left: var(--hero-b2-left);
  border-top: 1px solid var(--hero-b2-accent-deep);
  border-left: 1px solid var(--hero-b2-accent-deep);
}

.hero-b2-corner-br {
  bottom: calc(clamp(2.5rem, 5vw, 4.2rem) - 8px);
  right: clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--hero-b2-accent-deep);
  border-right: 1px solid var(--hero-b2-accent-deep);
}

/* Escenario principal apoyado en la base */
.hero-b2-stage {
  position: relative;
  min-height: calc(100svh - 81px - 10px);
  height: calc(100svh - 81px - 10px);
  padding-top: calc(var(--bar-h, 104px) + 1.2rem);
  padding-bottom: clamp(1.2rem, 2.8vh, 2.2rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
}

/* ====================================================
   BLOQUE DEL OFICIO (ZONA BAJA-IZQUIERDA)
   Contenedor dimensional de ancho (container-type: inline-size)
   Microetiqueta mono con cota, regla de acento y títulos en máscara
   ==================================================== */
.hero-b2-oficio-block {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: min(960px, calc(100vw - var(--hero-b2-left) - var(--gutter)));
  container-type: inline-size;
  display: flex;
  flex-direction: column;
}

/* Microetiqueta en mono con cota técnica de plano */
.hero-b2-oficio-badge {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hero-b2-accent);
  font-weight: 500;
  opacity: 0;
  transform: translateY(-4px);
  animation: heroB2BadgeIn 380ms var(--hero-ease) 160ms forwards;
}

.hero-b2-oficio-badge::before {
  content: "|— ";
  color: var(--hero-b2-accent-deep);
  font-weight: 400;
  letter-spacing: 0.05em;
}

@keyframes heroB2BadgeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Regla calibrada mecanizada con acabado en degradado y tick de nonio */
.hero-b2-oficio-rule {
  position: relative;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--hero-b2-accent) 0%, var(--hero-b2-accent-deep) 65%, rgba(143, 176, 255, 0.15) 100%);
  margin: 0.35rem 0 0.85rem;
  transform-origin: left;
  transform: scaleX(0);
  animation: heroB2RuleIn 420ms var(--hero-ease) 220ms forwards;
}

.hero-b2-oficio-rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 1px;
  height: 6px;
  background: var(--hero-b2-accent);
}

@keyframes heroB2RuleIn {
  to {
    transform: scaleX(1);
  }
}

/* Títulos del oficio a dos líneas en máscaras limpias sin recorte superior */
.hero-b2-oficio-titles {
  margin: 0;
}

.hero-b2-oficio-mask {
  overflow: hidden;
  display: block;
  line-height: 1.1;
  padding-block: 0.04em;
}

.hero-b2-oficio-l1,
.hero-b2-oficio-l2 {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.4rem, 7cqw, 5.8rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(105%);
  opacity: 0;
}

/* Línea 1: Blanco sólido */
.hero-b2-oficio-l1 {
  color: #ffffff;
  margin-bottom: 0.22rem;
  animation: heroB2LineRise 460ms var(--hero-ease) 280ms forwards;
}

/* Línea 2: Azul de acento relámpago sólido (máxima legibilidad y contraste) */
.hero-b2-oficio-l2 {
  color: var(--hero-b2-accent);
  animation: heroB2LineRise 460ms var(--hero-ease) 350ms forwards;
}

@keyframes heroB2LineRise {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Tipografía china del oficio */
.hero-b2-oficio-titles .zh .hero-b2-oficio-l1,
.hero-b2-oficio-titles .zh .hero-b2-oficio-l2 {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: clamp(3.2rem, 6.5cqw, 5.4rem);
  letter-spacing: 0.08em;
  line-height: 1.14;
}

/* Control bilingüe estricto del oficio */
.hero-b2-oficio-titles .zh {
  display: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

.hero-b2-oficio-titles .es {
  display: block;
  opacity: 1;
  transition: opacity 200ms ease;
}

html[data-lang="zh"] .hero-b2-oficio-titles .es {
  display: none !important;
  opacity: 0;
}

html[data-lang="zh"] .hero-b2-oficio-titles .zh {
  display: block !important;
  opacity: 1;
}

/* ====================================================
   FRASE DE LA PORTADA (TESIS TÉCNICA SECUNDARIA)
   Tipografía limpia, contraste reforzado (> 8:1) y revelado en 3 momentos
   ==================================================== */
.hero-b2-frase {
  margin: clamp(0.85rem, 1.8vh, 1.35rem) 0 0;
  max-width: min(920px, 100%);
  font-family: var(--sans);
  font-size: clamp(1.05rem, 2.2cqw, 1.25rem);
  line-height: 1.5;
  color: #c4d3e8;
  text-wrap: balance;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Momentos de la frase revelados en cascada */
.hero-b2-frase-m1,
.hero-b2-frase-m2,
.hero-b2-frase-m3 {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  animation: heroB2FraseFade 380ms var(--hero-ease) forwards;
}

.hero-b2-frase-m1 { animation-delay: 480ms; }
.hero-b2-frase-m2 { animation-delay: 550ms; }
.hero-b2-frase-m3 { animation-delay: 620ms; }

@keyframes heroB2FraseFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Énfasis sobrio en azul de acento (arranco máquina) */
.hero-b2-frase-acc {
  font-style: normal;
  font-weight: 600;
  color: var(--hero-b2-accent);
}

/* Soporte bilingüe estricto de la frase */
.hero-b2-frase .zh {
  display: none;
  opacity: 0;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: clamp(1.02rem, 2.1cqw, 1.22rem);
  line-height: 1.62;
  letter-spacing: 0.03em;
}

.hero-b2-frase .es {
  display: block;
  opacity: 1;
}

html[data-lang="zh"] .hero-b2-frase .es {
  display: none !important;
  opacity: 0;
}

html[data-lang="zh"] .hero-b2-frase .zh {
  display: block !important;
  opacity: 1;
}

/* ====================================================
   FIGURA DE ARNAU: LIMPIA Y A LA DERECHA (z-index: 2)
   Apoyada sólidamente en .hazard
   ==================================================== */
.hero-b2-arnau-wrap {
  position: absolute !important;
  right: calc(clamp(0px, 3.2vw, 52px) + 160px + clamp(0px, (100vw - 960px) * 200 / 240, 200px));
  bottom: 10px;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.hero-b2-arnau {
  display: block;
  max-height: clamp(450px, calc(0.86 * (100svh - 91px)), 860px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom right;
  opacity: 0;
  transform: translateY(4%);
  animation: heroB2ArnauRise 720ms var(--hero-ease) 120ms forwards;
}

@keyframes heroB2ArnauRise {
  from {
    opacity: 0;
    transform: translateY(4%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ====================================================
   PANTALLAS PEQUEÑAS (< 960px): APILADO FLUIDO
   ==================================================== */
@media (max-width: 959px) {
  .hero-b2 {
    min-height: auto;
    height: auto;
  }

  .hero-b2-stage {
    min-height: auto;
    height: auto;
    padding-top: calc(var(--bar-h, 104px) + 1.2rem);
    padding-bottom: 1.5rem;
  }

  .hero-b2-oficio-block {
    max-width: 100%;
  }

  .hero-b2-oficio-l1,
  .hero-b2-oficio-l2 {
    font-size: clamp(2rem, 7vw, 3.2rem);
    white-space: normal;
  }

  .hero-b2-arnau-wrap {
    position: relative !important;
    right: auto;
    bottom: auto;
    margin-top: 1.5rem;
    justify-content: center;
  }

  .hero-b2-arnau {
    max-height: clamp(380px, 58vh, 500px);
    object-position: bottom center;
  }

  .hero-b2-corner {
    display: none;
  }
}

/* ====================================================
   RESPETO ESTRICTO A PREFERS-REDUCED-MOTION
   ==================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-b2-arnau,
  .hero-b2-oficio-badge,
  .hero-b2-oficio-rule,
  .hero-b2-oficio-l1,
  .hero-b2-oficio-l2,
  .hero-b2-frase-m1,
  .hero-b2-frase-m2,
  .hero-b2-frase-m3 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-b2-oficio-rule {
    transform: scaleX(1) !important;
  }
}

/* ====================================================
   ESTADO FINAL ASENTADO (NO-REPETICIÓN EN CAMBIO DE IDIOMA)
   ==================================================== */
.hero-b2-settled .hero-b2-arnau,
.hero-b2-settled .hero-b2-oficio-badge,
.hero-b2-settled .hero-b2-oficio-l1,
.hero-b2-settled .hero-b2-oficio-l2,
.hero-b2-settled .hero-b2-frase-m1,
.hero-b2-settled .hero-b2-frase-m2,
.hero-b2-settled .hero-b2-frase-m3 {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.hero-b2-settled .hero-b2-oficio-rule {
  animation: none !important;
  transform: scaleX(1) !important;
}

/* ====================================================
   TRAYECTORIA (#camino): CALIBRACIÓN PARA FINAL DE CARRERA
   Centrado y limitado para relación de aspecto 1120/440 = 2.545
   ==================================================== */
.camino .stage {
  justify-content: flex-start;
  padding-top: clamp(1.8rem, 4vh, 2.8rem);
}
.camino .mk {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.camino .mk.on {
  opacity: 1;
}
.camino .read {
  display: none;
}
.camino .rig {
  margin-top: clamp(0.2rem, 1vh, 0.7rem);
  margin-inline: auto;
  width: 100%;
}
@media (min-width: 760px) {
  .camino .rig {
    max-width: min(100%, calc((100vh - var(--bar-h, 104px) - clamp(8rem, 5vh + 6rem, 10rem)) * 2.545));
  }
}

/* ====================================================
   FRANJA DE CIFRAS CON PANELES DE LÁMINAS (.lam-*)
   ==================================================== */
.lam-stats {
  --h: clamp(52px, calc((100vw - 2 * var(--gutter)) / 4.4), 150px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 100%;
  margin-inline: auto;
}

.lam-stat {
  display: flex;
  flex-direction: column;
  gap: calc(var(--h) * .2);
  flex: 0 0 auto;
  min-width: 0;
}

.lam-group {
  display: flex;
  align-items: flex-start;
  height: var(--h);
}

.lam-label {
  width: 0;
  min-width: 100%;
  text-align: center;
}

.lam-label .es {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35em;
}

.lam-label .zh {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: .35em;
}

html[data-lang="zh"] .lam-label .es {
  display: none;
}

html[data-lang="zh"] .lam-label .zh {
  display: flex;
}

.lam-text-main {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: .95;
  font-size: clamp(17px, calc(var(--h) * .19), 30px);
  color: var(--accent);
}

.lam-label .zh .lam-text-main {
  text-transform: none;
  letter-spacing: .08em;
}

.lam-text-sub {
  font-family: var(--mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1.35;
  font-size: clamp(9.5px, calc(var(--h) * .085), 13px);
  color: var(--muted);
  text-wrap: balance;
}

/* Soporte metálico cromado entre paneles */
.lam-spine {
  flex: 0 0 auto;
  display: block;
  width: calc(var(--h) * 1.08 * .3);
  height: calc(var(--h) * 1.08);
  margin-top: calc(var(--h) * -.04);
  margin-inline: calc(var(--h) * -.02);
  position: relative;
  z-index: 4;
  overflow: visible;
}

/* Panel de lámina */
.lam-flip {
  position: relative;
  height: var(--h);
  width: calc(var(--h) * 1.18);
  perspective: calc(var(--h) * 4);
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(var(--h) * .86);
  line-height: var(--h);
  text-align: center;
  color: #f3f5f7;
  background: #0c0e11;
  border: 1px solid #1b2027;
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.lam-flip.lam-ready {
  line-height: 1;
  background: transparent;
  border-color: transparent;
}

/* Pila de láminas simulada en el primer panel */
.lam-stat:first-child .lam-flip::before,
.lam-stat:first-child .lam-flip::after {
  content: "";
  position: absolute;
  top: 3%;
  bottom: 3%;
  width: 7%;
  background: #0c0e11;
  border: 1px solid #1b2027;
  border-radius: 2px;
}

.lam-stat:first-child .lam-flip::before {
  left: -3.6%;
  opacity: .5;
}

.lam-stat:first-child .lam-flip::after {
  left: -1.9%;
  opacity: .8;
}

/* Mitades de láminas */
.lam-half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  background: #0c0e11;
  border: 1px solid #1b2027;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-sizing: border-box;
}

.lam-half > span {
  position: absolute;
  left: 0;
  right: 0;
  height: 200%;
  display: grid;
  place-items: center;
  padding-top: .02em;
}

.lam-t {
  top: 0;
  border-radius: 2px 2px 0 0;
  border-bottom: 0;
  transform-origin: 50% 100%;
}

.lam-b {
  bottom: 0;
  border-radius: 0 0 2px 2px;
  border-top: 0;
  transform-origin: 50% 0;
}

.lam-t > span {
  top: 0;
}

.lam-b > span {
  bottom: 0;
}

.lam-leaf-t {
  z-index: 3;
}

.lam-leaf-b {
  z-index: 3;
  transform: rotateX(90deg);
}

.lam-flip .lam-seam {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: #000;
  z-index: 5;
}

.lam-flip .lam-pin {
  position: absolute;
  top: 50%;
  width: calc(var(--h) * .045);
  height: calc(var(--h) * .045);
  margin-top: calc(var(--h) * -.0225);
  background: #c8ced4;
  border-radius: 1px;
  z-index: 6;
}

.lam-pin.lam-l {
  left: -1px;
}

.lam-pin.lam-r {
  right: -1px;
}

@media (prefers-reduced-motion: reduce) {
  .lam-leaf-t,
  .lam-leaf-b {
    display: none;
  }
}

/* ====================================================
   IMANES DE LA PORTADA (M-08)
   Concepto aprobado el 8 oct 2026: Imanes N/S rectangulares
   - Iman superior: absolute en #inicio, sube con la pagina
   - Iman inferior: fixed en viewport, gira 180° en 0-120px scroll
   - Lineas de campo: SVG N contra N (fotograma >= 33)
   - Llegada arriba: "clac" con rebote, destello y chispas
   - Sustituye .back-to-top en desktop (>= 760px) solo con JS activo (im-on)
   - Esquinas de 0 a 2px
   ==================================================== */

/* Iman superior (portada, fixed) */
.im-top {
  position: fixed;
  left: var(--im-x);
  top: calc(var(--im-contact) - 71.25px * var(--im-k, 1));
  transform: translateX(-50%);
  width: calc(60px * var(--im-k, 1));
  height: calc(75px * var(--im-k, 1));
  z-index: 20;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
}

.im-top-bounce {
  position: relative;
  width: calc(60px * var(--im-k, 1));
  height: calc(75px * var(--im-k, 1));
  transform-origin: center bottom;
}

.im-top-img {
  display: block;
  width: calc(60px * var(--im-k, 1));
  height: calc(75px * var(--im-k, 1));
  object-fit: fill;
  pointer-events: none;
}

/* Iman inferior (fijo en ventana) */
.im-low {
  position: fixed;
  left: var(--im-x);
  top: calc(var(--im-contact) - 18.75px * var(--im-k, 1));
  transform: translateX(-50%);
  width: calc(112.5px * var(--im-k, 1));
  height: calc(112.5px * var(--im-k, 1));
  z-index: 20;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  overflow: visible;
  display: none; /* Oculto sin JS; visible con html.im-on */
  outline: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.im-low:focus-visible {
  outline: 2px solid var(--hero-b2-accent, var(--accent));
  outline-offset: 2px;
}

.im-low-bounce {
  display: block;
  position: relative;
  width: calc(112.5px * var(--im-k, 1));
  height: calc(112.5px * var(--im-k, 1));
  transform-origin: center top;
}

.im-low-window {
  display: block;
  position: relative;
  width: calc(112.5px * var(--im-k, 1));
  height: calc(112.5px * var(--im-k, 1));
  overflow: hidden;
  border-radius: 2px;
  transition: transform 120ms ease-out;
}

.im-low:active .im-low-window {
  transform: scale(0.97);
}

.im-strip {
  display: block;
  height: calc(112.5px * var(--im-k, 1));
  width: calc(112.5px * var(--im-k, 1) * 37);
  max-width: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  pointer-events: none;
}

/* Destello en la linea de contacto */
.im-flash {
  position: absolute;
  left: 0;
  bottom: calc(3.75px * var(--im-k, 1));
  width: calc(60px * var(--im-k, 1));
  height: 2px;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
}

.im-top.im-clac .im-flash {
  animation: imFlashPulse 80ms ease-out forwards;
}

@keyframes imFlashPulse {
  0% {
    opacity: 1;
    transform: scale(0.7, 0.6);
  }
  50% {
    opacity: 1;
    transform: scale(1.5, 0.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.8, 0.3);
  }
}

/* Chispas generadas dinámicamente desde JS en la rendija de choque */
.im-sparks {
  position: absolute;
  left: 0;
  bottom: calc(3.75px * var(--im-k, 1));
  width: calc(60px * var(--im-k, 1));
  height: 0;
  pointer-events: none;
  overflow: visible;
}

.im-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 1.5px;
  border-radius: 1px;
  pointer-events: none;
  will-change: transform, opacity, background-color;
}

/* Control con JavaScript activo */
html.im-on .im-low {
  display: block;
}

/* Con los imanes activos sustituyen al botón de subir, también en móvil */
html.im-on .back-to-top {
  display: none !important;
}

/* Móvil (< 760px): imanes a escala reducida (--im-k) */
:root {
  --im-k: 1;
}
@media (max-width: 759px) {
  :root {
    --im-k: 0.55;
  }
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .im-strip {
    transform: translate3d(0, 0, 0) !important;
    will-change: auto !important;
  }
  .im-flash,
  .im-sparks {
    display: none !important;
  }
  .im-top.im-clac .im-top-bounce,
  .im-low.im-clac .im-low-bounce {
    animation: none !important;
  }
}



#este-ano .h-plc{margin:1.4rem auto 0;max-width:300px}
#este-ano .h-plc img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 12px rgba(18,28,40,.25))}
@media (min-width:1100px){
  #este-ano .h-split{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:2rem;align-items:center}
  #este-ano .h-split .h-feature-card{margin-top:0;grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
  #este-ano .h-split .h-feature-card .h-card-body{padding:1.2rem 1.4rem;gap:.4rem}
  #este-ano .h-split .h-feature-card h3{font-size:1.5rem}
  #este-ano .h-split .h-card-desc{font-size:.92rem;line-height:1.45}
  #este-ano .h-plc{margin:0;max-width:none}
}

/* Contacto: QR de WeChat (2026-10-16) */
.qr-wechat{margin:0;width:100%;max-width:260px;background:#fff;border:1px solid var(--line);padding:10px}
.qr-wechat img{display:block;width:100%;height:auto;image-rendering:pixelated}
.qr-wechat figcaption{margin-top:.55rem;text-align:center;font-size:.72rem;letter-spacing:.06em;color:var(--muted)}

/* Pie: frase de la web centrada (2026-10-16) */
body>footer .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
body>footer .wrap>span{grid-column:1;justify-self:start}
body>footer .made{grid-column:2;text-align:center}
@media (max-width:759px){
  body>footer .wrap{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  body>footer .wrap>span,body>footer .made{grid-column:1;justify-self:center}
}

/* Cables del circuito (js/cables.js), 2026-10-21 */
.cables{position:absolute;left:0;top:0;pointer-events:none;z-index:1;overflow:visible}
.cables path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cb-sen{stroke:#2b2f36;stroke-width:4}
.cb-sen-l{stroke:rgba(255,255,255,.22);stroke-width:1.2;transform:translate(-.8px,-.8px)}
.cb-mot{stroke:#23262b;stroke-width:7}
.cb-mot-l{stroke:rgba(255,255,255,.2);stroke-width:2;transform:translate(-1.2px,-1.2px)}
.cables .cb-tubo,.cables .cb-tubo-s,.cables .cb-tubo-m,.cables .cb-tubo-l{stroke-linecap:butt}
.cb-tubo-s{stroke:rgba(20,30,45,.18);stroke-width:19;transform:translate(0,4px)}
.cb-tubo{stroke:#08090b;stroke-width:19}
.cb-tubo-m{stroke:#23272d;stroke-width:13}
.cb-tubo-l{stroke:#5d646d;stroke-width:3;transform:translate(0,-3.5px)}
.cb-borne{fill:#c9a24a;stroke:#6b5420;stroke-width:1}
@media (max-width:1149px){.cables{display:none}}
.cb-gris{stroke:#7f827f;stroke-width:5.5}
.cb-gris-l{stroke:#a7aaa7;stroke-width:3}

/* ====================================================
   PORTADA: NOMBRE (estilo 4), FRASE (estilo B) Y OFICIO (estilo C). 2026-10-21
   ==================================================== */
.hero-nombre .hero-b2-oficio-l1,
.hero-nombre .hero-b2-oficio-l2,
.hero-b2-oficio-titles.hero-nombre .zh .hero-b2-oficio-l1,
.hero-b2-oficio-titles.hero-nombre .zh .hero-b2-oficio-l2 {
  font-family: var(--display);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.005em;
  line-height: 0.88;
}
.hero-nombre .hero-b2-oficio-mask { padding-block: 0.06em 0.02em; }
.hero-nombre .hero-b2-oficio-l1 { margin-bottom: 0; }
.hero-nom-mark {
  background: linear-gradient(transparent 55%, #f0b800 55%, #f0b800 92%, transparent 92%);
  color: #ffffff;
  padding: 0 0.08em;
}
.hero-nom-zh {
  display: inline-block;
  margin-left: 0.35em;
  vertical-align: 0.55em;
  font: 700 0.3em/1 "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color: #f0b800;
  letter-spacing: 0.12em;
  text-transform: none;
}
/* frase: estilo B (cursiva) */
.hero-b2-frase .es { font-style: italic; }
.hero-b2-frase-acc { font-weight: 700; color: #8fb0ff; }
/* oficio: estilo C (dos líneas, blanco y azul) */
.hero-oficio {
  margin: clamp(0.9rem, 1.8vh, 1.3rem) 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4cqw, 1.7rem);
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0;
  transform: translateY(6px);
  animation: heroB2FraseFade 380ms var(--hero-ease) 720ms forwards;
}
.hero-oficio-b { color: #5b8cff; }
.hero-oficio .zh { display: none; font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; letter-spacing: 0.1em; }
html[data-lang="zh"] .hero-oficio .es { display: none; }
html[data-lang="zh"] .hero-oficio .zh { display: inline; }
.hero-b2-settled .hero-oficio { animation: none !important; opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .hero-oficio { animation: none !important; opacity: 1 !important; transform: none !important; } }
.hero-b2-frase,.hero-oficio{text-shadow:0 1px 2px rgba(5,10,20,.9),0 0 14px rgba(5,10,20,.75)}
/* Nombre arriba y el doble de grande; sin las marcas de esquina (2026-10-21) */
.hero-b2-corner { display: none !important; }
.hero-b2-stage .hero-b2-oficio-block { flex: 1 1 auto; }
.hero-b2-oficio-block > .hero-b2-frase { margin-top: auto; }
.hero-nombre .hero-b2-oficio-l1,
.hero-nombre .hero-b2-oficio-l2,
.hero-b2-oficio-titles.hero-nombre .zh .hero-b2-oficio-l1,
.hero-b2-oficio-titles.hero-nombre .zh .hero-b2-oficio-l2 { font-size: clamp(5.4rem, 14cqw, 11.6rem); }
@media (max-width: 959px) {
  .hero-nombre .hero-b2-oficio-l1,
  .hero-nombre .hero-b2-oficio-l2,
  .hero-b2-oficio-titles.hero-nombre .zh .hero-b2-oficio-l1,
  .hero-b2-oficio-titles.hero-nombre .zh .hero-b2-oficio-l2 { font-size: clamp(3.4rem, 15vw, 6.4rem); }
  .hero-b2-oficio-block > .hero-b2-frase { margin-top: clamp(0.85rem, 1.8vh, 1.35rem); }
}
.hero-nombre .hero-b2-oficio-l1,.hero-nombre .hero-b2-oficio-l2{display:inline-block}
/* La foto se coloca respecto al imán (centro en 50vw + 450px), para que el imán quede siempre encima de ella,
   como en pantallas grandes (≈ al 84 % del ancho de la foto). 2026-10-21 */
@media (min-width: 960px) {
  .hero-b2-arnau-wrap {
    right: max(8px, calc(50vw - 450px - 0.115 * clamp(450px, calc(0.86 * (100svh - 91px)), 860px))) !important;
  }
}
/* Frase y oficio: 1/4 más grandes y centrados en la altura libre, sin llegar a la cara (2026-10-21) */
@media (min-width: 960px) {
  .hero-b2-oficio-block > .hero-b2-frase {
    margin-top: auto;
    font-size: clamp(1.31rem, 2.75cqw, 1.56rem);
    max-width: calc(944px - 0.3985 * clamp(450px, calc(0.86 * (100svh - 91px)), 860px));
  }
  .hero-b2-frase .zh { font-size: clamp(1.28rem, 2.6cqw, 1.52rem); }
  .hero-oficio { font-size: clamp(1.62rem, 3cqw, 2.12rem); margin-bottom: auto; }
}
/* pantallas grandes: frase y oficio dos lineas mas arriba */
@media (min-width: 1600px) and (min-height: 900px) { .hero-b2-oficio-block > .hero-oficio { margin-bottom: auto; } .hero-b2-oficio-block { padding-bottom: 150px; } }
/* Oficio abajo del todo y el doble de grande; la frase sigue a media altura (2026-10-21) */
@media (min-width: 960px) {
  .hero-b2-oficio-block > .hero-oficio { font-size: clamp(3.24rem, 6cqw, 4.24rem); line-height: 1; margin-top: auto; margin-bottom: 0; }
}
@media (min-width: 1600px) and (min-height: 900px) {
  .hero-b2-oficio-block { padding-bottom: 0; }
  .hero-b2-oficio-block > .hero-b2-frase { margin-bottom: 150px; }
}
@media (max-width: 959px) { .hero-oficio { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.02; } }
@media (min-width: 1600px) and (min-height: 900px) { .hero-b2-oficio-block > .hero-oficio { font-size: 4.5rem; margin-bottom: 60px; } }