/* =====================================================================
   SHAKA QUANTUM · estilos de las páginas internas
   ---------------------------------------------------------------------
   Lo que usan Servicios, Portafolio, Precios, Sobre mí y Contacto:
   encabezado de página, listas de servicios, el portafolio, los precios
   y los dos mundos (salud / cualquier negocio).

   Los colores salen de estilos.css (la paleta del BaZi). Aquí no se
   define ningún color nuevo: todo usa var(--fuego), var(--madera), etc.
   ===================================================================== */

/* =====================================================================
   EL ENCABEZADO DE CADA PÁGINA
   ===================================================================== */
.page-cab {
  padding: 64px 0 44px;
  border-bottom: 1px solid var(--linea);
}

/* =====================================================================
   LOS PUNTOS VERDES DE «SOBRE MÍ»
   ---------------------------------------------------------------------
   Detrás del título suben puntos verdes en línea recta: aparecen, suben,
   se desvanecen y vuelven a empezar. Es el mismo espíritu de la lluvia
   de código del portafolio, pero más callado.

   ⚠️ CÓMO SE LOGRA LA «FORMA LINEAL»

   Cada punto tiene su X fija: nace y muere en la misma columna, así que
   sube recto, sin desviarse. Lo que cambia de uno a otro es la velocidad,
   el tamaño y el retraso — por eso se ven puntos sueltos subiendo y no
   una cortina.

   ⚠️ POR QUÉ APARECEN Y DESAPARECEN

   En la animación, la opacidad arranca en 0 (invisible), sube a 1 en el
   primer tramo (aparece) y vuelve a 0 al final (desaparece). Como cada
   punto va por su cuenta, el resultado es un aparecer y desaparecer
   continuo.
   ===================================================================== */
.page-cab--puntos {
  position: relative;
  overflow: hidden;
}

.puntos-verdes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* El texto va por encima de los puntos */
.page-cab--puntos .contenedor {
  position: relative;
  z-index: 1;
}

.punto-verde {
  position: absolute;
  border-radius: 50%;
  /* El verde del sitio. Es el color del elemento Madera, que alimenta
     al Fuego: encaja con la paleta en vez de pelearse con ella. */
  background: #5CF29B;
  /* El halo va en proporción al tamaño. Con puntos de 2 a 4 px, uno
     grande los taparía y se verían manchas en vez de puntos. */
  box-shadow:
    0 0 4px rgba(92, 242, 155, .95),
    0 0 9px rgba(53, 183, 121, .7),
    0 0 16px rgba(53, 183, 121, .35);
  opacity: 0;
  animation-name: subirPunto;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

@keyframes subirPunto {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  /* Aparece rápido, para que el nacimiento se note */
  12% {
    opacity: 1;
  }
  /* Se mantiene encendido mientras sube */
  70% {
    opacity: 1;
  }
  /* Y se apaga al llegar arriba */
  100% {
    transform: translateY(calc(-1 * var(--alto, 80vh)));
    opacity: 0;
  }
}

/* En el celular el fondo se ve más apretado: menos brillo, para que no
   estorbe la lectura del título */
@media (max-width: 700px) {
  .punto-verde {
    box-shadow: 0 0 3px rgba(92, 242, 155, .8), 0 0 7px rgba(53, 183, 121, .45);
  }
}
.page-cab h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.page-cab h1 em { font-style: normal; color: var(--fuego); display: block; }
.page-sub {
  font-size: 1.04rem;
  color: var(--texto-2);
  max-width: 40em;
  margin: 0;
}

/* =====================================================================
   LOS DOS MUNDOS · salud y cualquier negocio
   ===================================================================== */
.dos-mundos { max-width: 900px; margin: 0 auto; }

.dos-mundos__lado {
  padding: 40px;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  border-top: 4px solid var(--fuego);
}
.dos-mundos__lado--salud { border-top-color: var(--madera); }

.dos-mundos__icono {
  display: block;
  font-size: 2.4rem;
  color: var(--madera);
  margin-bottom: 10px;
  text-shadow: 0 0 18px var(--madera);
}

.lista-servicios { margin-top: 30px; }
.lista-servicios__item {
  padding: 20px 0;
  border-bottom: 1px solid rgba(232, 163, 61, .12);
}
.lista-servicios__item:last-child { border-bottom: 0; }
.lista-servicios__item b {
  display: block;
  font-family: var(--display);
  font-size: 1.12rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--fuego);
  margin-bottom: 7px;
}
.lista-servicios__item p {
  margin: 0;
  font-size: .94rem;
  color: var(--texto-2);
}
.lista-servicios__item strong { color: var(--papel); }

/* =====================================================================
   EL PORTAFOLIO
   ===================================================================== */
.proyecto {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  margin-bottom: 30px;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.proyecto--invertido .proyecto__foto { order: 2; }

.proyecto__foto {
  min-height: 320px;
  background: var(--tinta-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.proyecto__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Cuando no hay foto: un fondo con el color del elemento y el carácter */
.proyecto__foto--simbolo {
  background:
    radial-gradient(circle at 50% 40%, rgba(232, 163, 61, .18), transparent 62%),
    var(--tinta-3);
  font-size: 5rem;
  color: var(--fuego);
  text-shadow: 0 0 40px var(--fuego);
}

.proyecto__texto { padding: 36px; }
.proyecto__texto h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.proyecto__tipo {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--madera);
  margin-bottom: 14px;
}
.proyecto__texto p { color: var(--texto-2); font-size: .94rem; }
.proyecto__texto strong { color: var(--papel); }

.etiquetas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.etiquetas span {
  padding: 5px 11px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fuego);
  background: rgba(232, 163, 61, .1);
  border: 1px solid var(--linea);
  border-radius: 999px;
}

/* Los resultados: las cifras de cada proyecto */
.resultados {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(232, 163, 61, .12);
}
.resultados div b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--fuego);
  line-height: 1;
}
.resultados div span {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-3);
}

/* =====================================================================
   LOS PRECIOS
   ===================================================================== */
.precios-rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
.precio {
  position: relative;
  padding: 32px 26px;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  display: flex;
  flex-direction: column;
}
.precio--destacado {
  border-color: var(--fuego);
  border-width: 2px;
  box-shadow: 0 0 40px -18px var(--fuego);
}
.precio--destacado::after {
  content: 'El más pedido';
  position: absolute;
  top: -13px;
  left: 26px;
  padding: 4px 12px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1A1408;
  background: var(--fuego);
  border-radius: 999px;
}
.precio h3 {
  font-family: var(--display);
  font-size: 1.3rem;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.precio__para {
  font-size: .82rem;
  color: var(--texto-3);
  margin: 0 0 8px;
}
.precio .valor {
  font-family: var(--display);
  font-size: 2.1rem;
  color: var(--fuego);
  margin: 12px 0 4px;
  line-height: 1;
}
.precio .valor small {
  font-size: .74rem;
  color: var(--texto-3);
  font-family: var(--sans);
  display: block;
  margin-top: 6px;
}
.precio ul {
  margin: 20px 0 24px;
  padding-left: 18px;
  color: var(--texto-2);
  font-size: .9rem;
  flex: 1;
}
.precio li { margin-bottom: 8px; }
.precio .boton { width: 100%; justify-content: center; }

/* La tabla de lo que incluye cada plan */
.tabla-plan {
  width: 100%;
  border-collapse: collapse;
  margin-top: 34px;
  font-size: .9rem;
}
.tabla-plan th, .tabla-plan td {
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(232, 163, 61, .12);
}
.tabla-plan th {
  font-family: var(--display);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fuego);
}
.tabla-plan td { color: var(--texto-2); }
.tabla-plan td:first-child { color: var(--papel); font-weight: 600; }
.tabla-plan tr:hover td { background: rgba(232, 163, 61, .04); }

/* =====================================================================
   SOBRE MÍ
   ===================================================================== */
.yo {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 48px;
  align-items: start;
}
.yo__foto img {
  width: 100%;
  border-radius: var(--radio);
  border: 2px solid var(--linea);
}
.yo__texto p { color: var(--texto-2); }
.yo__texto strong { color: var(--papel); }
.yo__texto h3 {
  font-family: var(--display);
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--fuego);
  margin: 34px 0 12px;
}

/* La línea de tiempo del camino */
.camino { margin-top: 34px; }
.camino__paso {
  position: relative;
  padding: 0 0 26px 34px;
  border-left: 2px solid var(--linea);
}
.camino__paso:last-child { border-left-color: transparent; padding-bottom: 0; }
.camino__paso::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fuego);
  box-shadow: 0 0 14px var(--fuego);
}
.camino__paso b {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.camino__paso span {
  display: block;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fuego);
  margin: 3px 0 7px;
}
.camino__paso p { margin: 0; font-size: .92rem; color: var(--texto-2); }

/* =====================================================================
   CONTACTO
   ===================================================================== */
.contacto-rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.contacto-datos { display: grid; gap: 16px; }
.contacto-dato {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.contacto-dato__icono {
  flex: none;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  border-radius: 12px;
  background: rgba(232, 163, 61, .12);
  color: var(--fuego);
}
.contacto-dato b {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: .94rem;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.contacto-dato p { margin: 0; font-size: .88rem; color: var(--texto-2); }
.contacto-dato a { color: var(--fuego); }

.formulario { display: grid; gap: 16px; }
.formulario label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fuego);
  margin-bottom: 7px;
}
.formulario input,
.formulario select,
.formulario textarea {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: .94rem;
  color: var(--papel);
  background: var(--tinta-2);
  border: 1px solid var(--borde);
  border-radius: 10px;
}
.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
  outline: none;
  border-color: var(--fuego);
  box-shadow: 0 0 0 3px rgba(232, 163, 61, .16);
}
.formulario textarea { min-height: 130px; resize: vertical; }
.formulario .boton { justify-content: center; }

/* =====================================================================
   EL CELULAR
   ===================================================================== */
@media (max-width: 900px) {
  .precios-rejilla { grid-template-columns: 1fr; }
  .proyecto { grid-template-columns: 1fr; }
  .proyecto--invertido .proyecto__foto { order: 0; }
  .proyecto__foto { min-height: 240px; }
  .yo { grid-template-columns: 1fr; gap: 30px; }
  .yo__foto { max-width: 340px; }
  .contacto-rejilla { grid-template-columns: 1fr; }
  .dos-mundos__lado { padding: 26px 20px; }
  .page-cab { padding: 44px 0 32px; }
  .tabla-plan { font-size: .82rem; }
  .tabla-plan th, .tabla-plan td { padding: 10px 8px; }
  .proyecto__texto { padding: 26px; }
}

@media (max-width: 560px) {
  .tabla-plan th:nth-child(3), .tabla-plan td:nth-child(3) { display: none; }
  .resultados { gap: 16px; }
  .resultados div b { font-size: 1.25rem; }
}

/* =====================================================================
   EL DATO DE VIRGO
   ---------------------------------------------------------------------
   Harold y Shaka son los dos de Virgo: Shaka nació el 29 de agosto y
   Harold el 5 de septiembre, siete días aparte. Es la historia de la
   marca, así que va destacada, no como un párrafo más.

   El signo ♍ se toma el color del Fuego (--fuego), que en su carta es
   el elemento que le falta.
   ===================================================================== */
.dato-virgo {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 28px 0;
  padding: 24px 26px;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--fuego);
  border-radius: var(--radio);
}
.dato-virgo__signo {
  flex: none;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--fuego);
  text-shadow: 0 0 22px var(--fuego);
}
.dato-virgo b {
  display: block;
  font-family: var(--display);
  font-size: 1.14rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fuego);
  margin-bottom: 9px;
}
.dato-virgo p {
  margin: 0 0 9px;
  font-size: .93rem;
  color: var(--texto-2);
}
.dato-virgo p:last-child { margin-bottom: 0; }
.dato-virgo strong { color: var(--papel); }

@media (max-width: 560px) {
  .dato-virgo { flex-direction: column; gap: 12px; padding: 20px; }
  .dato-virgo__signo { font-size: 2rem; }
}
/* El pie de la foto de "Sobre mi".
   La foto es Harold con Shaka, el dia del cumpleanos, con la chispa
   dorada. El pie explica quien es quien, que si no se entiende. */
.yo__foto-pie {
  margin: 12px 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--texto-3);
  text-align: center;
  font-style: italic;
}
/* =====================================================================
   LA DIRECCIÓN DE INTERNET, dentro de las tarjetas de precio
   ---------------------------------------------------------------------
   Muestra cómo quedará la dirección del cliente. Es un dato concreto
   que ayuda a entender la diferencia entre los dos planes: el básico
   usa un subdominio mío, el completo tiene dominio propio.
   ===================================================================== */
.precio code,
.tarjeta code {
  font-family: var(--mono);
  word-break: break-all;
}
/* =====================================================================
   LA LLUVIA DE CÓDIGO · el encabezado del portafolio
   ---------------------------------------------------------------------
   Detrás del título caen columnas de caracteres verdes, como en la
   película Matrix. Son tenues: el texto tiene que leerse por encima.

   ⚠️ CÓMO ESTÁ HECHO
   No es una imagen ni un video: son columnas de texto de verdad, que
   el navegador va moviendo con una animación. Así pesa nada y no hay
   que descargar nada.

   Las columnas las crea un pedacito de código al final del archivo
   (portafolio.html), porque el número cambia según el ancho de la
   pantalla.
   ===================================================================== */
.page-cab--codigo {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--linea);
}

.codigo-lluvia {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Un degradado que la hace desaparecer hacia abajo y a los lados,
     para que no compita con el texto */
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 75%, rgba(0,0,0,.4) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 75%, rgba(0,0,0,.4) 100%);
  opacity: 1;
}

/* Cada columna es un bloque de texto que baja */
.codigo-col {
  position: absolute;
  top: -100%;
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.35;
  white-space: pre;
  color: #5CF29B;
  text-shadow: 0 0 8px rgba(92, 242, 155, 1), 0 0 20px rgba(53, 183, 121, .9), 0 0 34px rgba(53, 183, 121, .5);
  animation: codigoBaja linear infinite;
}

@keyframes codigoBaja {
  from { transform: translateY(-20%); }
  to   { transform: translateY(120%); }
}

/* El contenido va por encima de la lluvia */
.page-cab--codigo .contenedor { position: relative; z-index: 1; }

/* En el celular menos columnas y más tenue: no queremos que estorbe */
@media (max-width: 700px) {
  .codigo-lluvia { opacity: .6; }
  .codigo-col { font-size: .68rem; }
}
/* =====================================================================
   LOS CARACTERES CHINOS · 狗 perro y 虎 tigre
   ---------------------------------------------------------------------
   Cada carácter se dibuja trazo por trazo, en el orden de la caligrafía.

   ⚠️ LOS TRAZOS SON OFICIALES
   No están dibujados a mano: vienen de Make Me a Hanzi, un proyecto
   libre con los trazos reales de miles de caracteres chinos, sacados de
   una tipografía taiwanesa de licencia abierta.

   El SVG viene en un sistema de 1024x1024 con el eje Y al revés (sube
   en vez de bajar). Por eso el archivo trae un «scale(1, -1)»: sin eso
   los caracteres saldrían al revés, como en un espejo.
   ===================================================================== */
.trazo-caja {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 46px;
  max-width: 820px;
  margin: 0 auto;
}

.trazo-item { text-align: center; }

.trazo-lienzo {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  /* La cuadrícula de fondo: la que usan los cuadernos de caligrafía */
  background-image:
    linear-gradient(rgba(232,163,61,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,163,61,.07) 1px, transparent 1px);
  background-size: 25% 25%;
  background-position: center;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 0;
  overflow: hidden;
}

/* El SVG se ancla a la caja entera, sin depender de «height: 100%»,
   que dentro de una caja con relleno daba una altura equivocada y
   dejaba el trazo aplastado en una línea invisible. */
.trazo-lienzo svg {
  display: block;
  width: 100%;
  height: auto;
  padding: 22px;
  box-sizing: border-box;
}

.trazo-item__nombre {
  margin-top: 20px;
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fuego);
}
.trazo-item__pinyin {
  display: block;
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .05em;
  color: var(--texto-2);
  margin-top: 5px;
  text-transform: none;
}

.trazo-item__nota {
  margin: 14px auto 0;
  max-width: 26em;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--texto-2);
  text-align: left;
}
.trazo-item__nota strong { color: var(--papel); }

/* =====================================================================
   LOS TRES SÍMBOLOS DE LA PORTADA
   ---------------------------------------------------------------------
   Van encima de «Medellín · Colombia», pequeños y en fila. Cada uno dice
   algo cierto de esta casa:

     Ba Gua            el I Ching, que ya está dentro de la app XIHU
     Rueda del Dharma  la tradición budista que atraviesa la medicina china
     水                 el agua, el elemento que más pesa en su carta BaZi

   ⚠️ SE DIBUJARON A MANO EN SVG

   No son imágenes copiadas de ningún banco: son símbolos milenarios que
   se dibujaron desde cero. Pesan poquísimo (unos 9 KB entre los tres) y
   se ven nítidos en cualquier pantalla, sin importar el tamaño.

   El color de cada uno sale de la paleta de la marca, que a su vez sale
   de la carta BaZi de Harold.
   ===================================================================== */
.simbolos {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

/* ⚠️ EL TAMAÑO VA CON MAX-WIDTH, NO SOLO CON WIDTH

   En el celular salían grandísimos. La causa: el SVG tiene su propio
   «viewBox» y, si no se le pone un tope, se estira hasta llenar el
   espacio que le den. Con «max-width» y «max-height» se le pone un techo
   que no puede pasar, sin importar la pantalla.

   ⚠️ Y LOS TRES DEL MISMO TAMAÑO

   El círculo de fuera es igual en los tres (0,42 del lienzo), así que
   con la misma caja cuadrada los tres aros miden lo mismo. Lo que
   cambiaba era el GROSOR del trazo: la flor de ciruelo y la rueda lo
   tenían más grueso que el Ba Gua, y por eso parecían de distinto
   tamaño aunque no lo fueran. */
.simbolos__uno {
  display: block;
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
  flex: 0 0 auto;          /* que no se estire dentro del flex */
  /* ⚠️ SIN ANIMACIÓN

     Antes tenían un vaivén lento, uno subiendo y otro bajando. Harold
     pidió quitarlo: los tres símbolos son marcas, y una marca se queda
     quieta. El movimiento además hacía que parecieran «levitar» y
     distraía de lo que dicen. */
  transform: none;
  animation: none;
}

.simbolos__uno svg {
  display: block;
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
  overflow: visible;
}

/* Los tres aros, del mismo grosor exacto.
   El círculo de fuera es el PRIMER <circle> de cada símbolo. */
.simbolos__uno svg > circle:first-of-type {
  stroke-width: 3.2;
}

/* En el celular, todavía más pequeños: así no empujan el texto ni
   dominan la pantalla. */
@media (max-width: 700px) {
  .simbolos { gap: 12px; margin-bottom: 14px; }
  .simbolos__uno,
  .simbolos__uno svg { width: 28px; height: 28px; max-width: 28px; max-height: 28px; }
}

/* Si el visitante pidió menos movimiento en su sistema, se quedan quietos */
@media (prefers-reduced-motion: reduce) {
  .simbolos__uno { animation: none; }
}

/* =====================================================================
   LOS BOTONES DE «VERLO FUNCIONANDO» EN EL PORTAFOLIO
   ---------------------------------------------------------------------
   Cada proyecto tiene un botón que lleva al sitio real, publicado. Es lo
   que separa un portafolio creíble de una lista de promesas: el visitante
   puede comprobarlo él mismo en vez de creerle al que lo escribió.
   ===================================================================== */
.proyecto__aviso {
  margin-top: 12px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--texto-3);
  max-width: 42em;
}

/* El grupo de botones ya existe en el sitio; aquí solo se separa un poco
   del bloque de etiquetas que va justo encima. */
.proyecto__texto .grupo-botones {
  margin-top: 22px;
}

/* La línea que invita a probar algo que ya está publicado. Va dentro de
   la tarjeta y con un enlace dorado, para que se vea que se puede hacer
   clic sin parecer un botón más. */
.tarjeta__prueba {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--texto-2);
}

.tarjeta__prueba a {
  color: var(--fuego);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tarjeta__prueba a:hover { color: var(--aviso); }

/* =====================================================================
   LA CALIGRAFÍA EN LA CABECERA DE CONTACTO
   ---------------------------------------------------------------------
   Los caracteres 狗 (perro) y 虎 (tigre) van debajo del texto de
   «Hablemos de su proyecto». Se dibujan solos, trazo por trazo.

   El dorado viene puesto en el propio SVG; aquí solo se le da tamaño y
   se centra. El lienzo NO lleva fondo ni borde, para que los trazos
   floten sobre las chispas.
   ===================================================================== */
.caligrafia {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(28px, 5vw, 64px);
  margin-top: clamp(16px, 2vw, 26px);
}

/* En la página de inicio van pequeñas y discretas: acompañan al texto,
   no lo tapan. Es un detalle de marca, no el protagonista. */
.caligrafia-seccion .caligrafia__item {
  width: clamp(96px, 10vw, 130px);
}

.caligrafia-seccion {
  padding-top: clamp(24px, 3vw, 44px);
  padding-bottom: clamp(24px, 3vw, 44px);
}

/* Las notas bajo cada carácter, más discretas ahora que son pequeñas */
.caligrafia-seccion .caligrafia__nombre {
  margin-top: 10px;
  font-size: 1.15rem;
}

.caligrafia-seccion .caligrafia__nota {
  font-size: .74rem;
  line-height: 1.45;
}

.caligrafia__item {
  text-align: center;
  width: clamp(150px, 26vw, 220px);
}

/* El SVG manda: se le da el ancho y él calcula su alto con su propia
   proporción (viewBox cuadrado). Nada de position:absolute ni de
   height:100%, que dentro de una caja con relleno o con borde dan una
   altura equivocada y deforman el dibujo. */
.caligrafia__lienzo {
  width: 100%;
  margin: 0 auto;
}

.caligrafia__lienzo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* ---------------------------------------------------------------------
   LOS TROZOS DE CADA TRAZO

   Cada trazo de la caligrafía viene partido en trozos, puestos en orden
   a lo largo de su recorrido. Empiezan invisibles y el código los va
   mostrando uno tras otro, de modo que parece que la mano pinta el
   trazo.

   ⚠️ Aquí NO hay ninguna rotación ni transformación. Los trozos ya están
   en su sitio exacto; solo cambia su opacidad.
   --------------------------------------------------------------------- */
.caligrafia__lienzo .trazo-trozo,
.trazo-lienzo .trazo-trozo {
  opacity: 0;
  /* La transición la pone el código de cada página, trozo por trozo.
     Aquí solo se deja el estado inicial: invisible. */
  will-change: opacity, transform, filter;
}

.caligrafia__lienzo .trazo-g,
.trazo-lienzo .trazo-g {
  /* Nada de transform-box ni rotaciones: el grupo es solo un recipiente */
  transform: none;
}

.caligrafia__nombre {
  margin-top: 14px;
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--fuego);
  letter-spacing: .04em;
}

.caligrafia__nombre span {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--texto-3);
}

.caligrafia__nota {
  margin: 10px auto 0;
  max-width: 22em;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--texto-2);
}

@media (max-width: 520px) {
  .caligrafia { gap: 34px; }
  .caligrafia__item { width: clamp(130px, 38vw, 180px); }
}

@media (max-width: 700px) {
  .trazo-caja { grid-template-columns: 1fr; gap: 40px; }
  .trazo-lienzo { width: min(100%, 260px); }
}
/* =====================================================================
   LA ESPIRAL GIRANDO · el encabezado de Precios
   ---------------------------------------------------------------------
   Un dibujo de anillos de puntos (1.194 cuadritos) que gira despacio
   detrás del título.

   ⚠️ POR QUÉ GIRA Y CÓMO
   El SVG es un archivo quieto (media/espiral.svg). El movimiento lo
   pone el CSS: se coloca en el fondo del encabezado, en la esquina
   derecha, y se le aplica una rotación continua de 90 segundos. Como
   el patrón es radial, al girar no se nota dónde empieza ni termina:
   da la sensación de un túnel que se mueve hacia adentro.

   Va tenue y solo en una parte, para que el título se lea encima.
   ===================================================================== */
.page-cab--espiral {
  position: relative;
  overflow: hidden;
}

.espiral-girando {
  position: absolute;
  top: 50%;
  right: -60px;
  width: min(70vw, 760px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background-image: url('media/espiral.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .85;
  pointer-events: none;
  z-index: 0;
  animation: girarEspiral 46s linear infinite;
  /* Se va apagando hacia la izquierda para que no estorbe el texto */
  -webkit-mask-image: radial-gradient(circle at 100% 50%, #000 0%, #000 55%, transparent 85%);
  mask-image: radial-gradient(circle at 100% 50%, #000 0%, #000 55%, transparent 85%);
}

@keyframes girarEspiral {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

.page-cab--espiral .contenedor { position: relative; z-index: 1; }

@media (max-width: 800px) {
  .espiral-girando {
    width: 400px;
    right: -110px;
    opacity: .55;
  }
}
/* =====================================================================
   LAS CHISPAS · el encabezado de Contacto
   ---------------------------------------------------------------------
   Partículas de luz que salen disparadas desde el centro, como en un
   viaje a toda velocidad. Da la sensación de que uno se mueve hacia
   adelante y las chispas pasan de largo.

   Cada chispa es un cuadrito pequeño que:
     · nace en el centro
     · se estira en la dirección que le tocó (--dx, --dy)
     · se agranda y se va apagando

   El estirón es lo que da la velocidad: un punto que se alarga parece
   moverse rápido. Si no se estirara, parecería que flota.

   Las que llevan la clase «--blanca» salen más claras, como el núcleo
   de una chispa de verdad.
   ===================================================================== */
.page-cab--chispas {
  position: relative;
  overflow: hidden;
}

.chispas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* El punto del que salen todas: el centro del área */
  display: grid;
  place-items: center;
}

.chispa {
  position: absolute;
  width: var(--tam);
  height: var(--tam);
  border-radius: 50%;
  background: #E8A33D;
  box-shadow:
    0 0 6px rgba(232, 163, 61, .9),
    0 0 14px rgba(232, 163, 61, .55);
  opacity: 0;
  /* La animación: se agranda, se estira hacia su dirección, y se apaga */
  animation: viajar var(--dur) linear infinite;
  animation-delay: var(--retraso);
  will-change: transform, opacity;
}

.chispa--blanca {
  background: #FFF3D6;
  box-shadow:
    0 0 8px rgba(255, 243, 214, .95),
    0 0 20px rgba(232, 163, 61, .7);
}

@keyframes viajar {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(.4);
  }
  8% {
    opacity: 1;
  }
  /* Va creciendo mientras se aleja: eso es lo que da la sensación de
     que se acerca a la pantalla */
  70% {
    opacity: .85;
  }
  100% {
    opacity: 0;
    /* Se estira en la dirección que le tocó, y se agranda */
    transform: translate(var(--dx), var(--dy)) scale(2.6);
  }
}

/* El contenido va por encima de las chispas */
.page-cab--chispas .contenedor { position: relative; z-index: 1; }

/* En el celular, más tenue: no queremos que estorbe la lectura */
@media (max-width: 700px) {
  .chispa { box-shadow: 0 0 5px rgba(232, 163, 61, .8); }
}