/* =====================================================================
   SHAKA QUANTUM · Hoja de estilos
   ---------------------------------------------------------------------
   La idea del diseño:
     · Negro tinta de fondo → se ve caro, serio, de estudio
     · Dorado como acento → el detalle, el punto exacto
     · Una RETÍCULA de puntos de fondo → "quantum", la unidad mínima,
       y a la vez los 361 puntos con los que trabaja la app de medicina
     · La foto de Shaka como la marca, no como adorno

   Para cambiar los colores, edite ":root" y todo el sitio cambia.
   ===================================================================== */

:root {
  /* ------------------------------------------------------------------
     LA PALETA · elegida con el BaZi de Harold
     ------------------------------------------------------------------
     Su carta (5 sep 1972, 1:00 a.m., Cali) es FRÍA, HÚMEDA y OSCURA:

         Agua  6   (lo que le sobra)
         Tierra 4  (su propio elemento, Maestro del Día 己)
         Metal 3   (alimenta al Agua, o sea a lo que le sobra)
         Madera 2
         Fuego 0   ← EL GRAN AUSENTE

     Nació en otoño y a la hora más oscura del día. Lo que necesita es
     CALOR: Fuego (火) como principal, Madera (木) que lo alimenta, y
     Tierra seca que le dé raíz.

     Por eso esta paleta NO usa azules: el azul es Agua, y el Agua ya
     le sobra. En su lugar:

         negro cálido   → fondo, sin ser frío
         marrón oscuro  → las tarjetas (Tierra seca)
         ÁMBAR DORADO   → Fuego · el acento principal
         verde          → Madera · el segundo acento
         crema          → Tierra clara · para las secciones suaves

     Cada color de aquí abajo está puesto por su elemento, no por gusto.
     ------------------------------------------------------------------ */

  /* --- Fondos · Tierra seca, nunca azul --- */
  --tinta: #12100E;        /* fondo: negro cálido, con un punto de marrón */
  --tinta-2: #1C1814;      /* tarjetas y paneles: marrón oscuro (Tierra) */
  --tinta-3: #262019;      /* un escalón más claro, para detalles */

  /* --- Los acentos --- */
  --fuego: #E8A33D;        /* ÁMBAR · Fuego 火 · el acento principal */
  --fuego-claro: #F5C877;  /* el mismo, más claro, para los hover */
  --madera: #35B779;       /* VERDE · Madera 木 · alimenta al Fuego */
  --aviso: #FF7657;        /* CORAL · Fuego vivo · avisos y promociones */
  --tierra: #F7F0DF;       /* CREMA · Tierra clara · secciones suaves */

  /* --- Los textos --- */
  --papel: #F5F1E8;        /* blanco cálido, no azulado */
  --texto-2: #B8AFA2;      /* gris cálido · párrafos secundarios */
  --texto-3: #7D7469;      /* el más tenue, para notas al pie */

  /* --- Bordes --- */
  --linea: rgba(232, 163, 61, .22);   /* borde dorado tenue */
  --borde: #4A3F33;                    /* borde sólido, color Tierra */

  --display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', 'Consolas', ui-monospace, monospace;

  --ancho: 1140px;
  --radio: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* La retícula de puntos: el fondo de todo el sitio.
   Se hace con un degradado repetido, sin imágenes ni peso extra.

   ⚠️ VA FIJA (position: fixed), así que NO se mueve al desplazar la
   página: el contenido pasa por encima y la va tapando y destapando.
   De ahí la sensación de que los puntos "aparecen y desaparecen".

   El color es fuego (marrón dorado). Al 38% sobre el fondo oscuro da
   rgb(94, 65, 27), un marrón cálido; nunca verde. Si en pantalla se ve
   de otro color, es el navegador mostrando una copia vieja del archivo. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle, rgba(214, 138, 44, .38) 2.4px, transparent 2.4px);
  background-size: 48px 48px;
  pointer-events: none;
}

img { max-width: 100%; display: block; }

a { color: var(--fuego); text-decoration: none; }
a:hover { color: var(--fuego-claro); }

.contenedor { width: min(100% - 40px, var(--ancho)); margin: 0 auto; }
.estrecho { max-width: 780px; }
.centrado { text-align: center; }

/* =====================================================================
   LA CABECERA
   ===================================================================== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 12, 11, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.cabecera-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
}
.marca {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--papel);
}
.marca img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--fuego);
}
.marca b {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}
.marca b span { color: var(--fuego); }
.marca small {
  display: block;
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--texto-2);
  text-transform: uppercase;
  margin-top: 4px;
}

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  padding: 9px 14px;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--papel);
  border-radius: 8px;
  transition: background .16s, color .16s;
}
.nav a:hover { background: rgba(217, 164, 65, .12); color: var(--fuego); }
.nav a.activo { color: var(--fuego); }
.nav a.nav-cta {
  background: var(--fuego);
  color: #1a1408;
  font-weight: 800;
}
.nav a.nav-cta:hover { background: var(--fuego-claro); color: #1a1408; }

/* El botón ☰ del celular */
.menu-toggle { display: none; }
.menu-btn {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--papel);
  background: var(--tinta-3);
  border: 2px solid var(--fuego);
  border-radius: 12px;
  cursor: pointer;
}

/* =====================================================================
   LA PORTADA
   ===================================================================== */
.portada {
  position: relative;
  padding: 84px 0 96px;
  overflow: hidden;
}

.portada-rejilla {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fuego);
  background: rgba(217, 164, 65, .1);
  border: 1px solid var(--linea);
  border-radius: 999px;
}
.etiqueta::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fuego);
  box-shadow: 0 0 10px var(--fuego);
}

h1 {
  font-family: var(--display);
  font-size: clamp(2.3rem, 6vw, 3.9rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
h1 em {
  font-style: normal;
  color: var(--fuego);
  display: block;
}

.entrada {
  font-size: 1.06rem;
  color: #cfc7bc;
  max-width: 34em;
  margin: 0 0 30px;
}

/* El subtítulo, debajo del titular grande.
   Dice lo específico — «aplicaciones y páginas web que funcionan sin
   internet» — en un tamaño intermedio: más chico que el titular, más
   grande que el párrafo. Así el ojo va de lo general a lo concreto. */
.titular-sub {
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  font-weight: 600;
  line-height: 1.4;
  color: #ddd5ca;
  max-width: 22em;
  margin: 0 0 20px;
  padding-left: 16px;
  border-left: 4px solid var(--fuego);
}
.titular-sub strong { color: var(--fuego); font-weight: 800; }

.grupo-botones { display: flex; flex-wrap: wrap; gap: 12px; }
.boton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .16s, background .16s, border-color .16s;
}
.boton--oro { background: var(--fuego); color: #1a1408; }
.boton--oro:hover { background: var(--fuego-claro); color: #1a1408; transform: translateY(-2px); }
.boton--borde { border-color: var(--linea); color: var(--papel); }
.boton--borde:hover { border-color: var(--fuego); color: var(--fuego); transform: translateY(-2px); }

/* --- La foto de Shaka --- */
.shaka-caja { position: relative; }
.shaka-caja img {
  width: 100%;
  border-radius: var(--radio);
  border: 2px solid var(--linea);
  object-fit: cover;
  aspect-ratio: 3 / 4;
}
.shaka-pie {
  position: absolute;
  left: 14px;
  bottom: 14px;
  right: 14px;
  padding: 11px 15px;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--papel);
  background: rgba(14, 12, 11, .9);
  backdrop-filter: blur(6px);
  border-left: 4px solid var(--fuego);
  border-radius: 8px;
}
.shaka-pie b { color: var(--fuego); }

/* Las cifras, debajo de la portada */
.cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 64px;
}
.cifra {
  padding: 22px;
  text-align: center;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.cifra b {
  display: block;
  font-family: var(--display);
  font-size: 2.2rem;
  color: var(--fuego);
  line-height: 1;
}
.cifra span {
  display: block;
  margin-top: 8px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-2);
}

/* La cifra del medio va en VERDE 木 (Madera), que es el elemento que
   alimenta al Fuego. Así las tres cifras no quedan de un solo color:
   dorado, verde, dorado. El verde tiene sentido aquí porque la cifra
   habla de funcionar sin internet — o sea, de algo que crece solo. */
.cifra--madera b { color: var(--madera); }

/* =====================================================================
   LAS SECCIONES
   ===================================================================== */
.seccion { padding: 76px 0; }
.seccion--alt { background: var(--tinta-2); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }

h2 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0 0 14px;
}
h2 span { color: var(--fuego); }

.antetitulo {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fuego);
  margin: 0 0 10px;
}

.sub { color: var(--texto-2); max-width: 44em; margin: 0 0 42px; }

.rejilla { display: grid; gap: 22px; }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }

.tarjeta {
  padding: 28px;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: transform .18s, border-color .18s;
}
.tarjeta:hover { transform: translateY(-3px); border-color: var(--fuego); }
.tarjeta-icono {
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--fuego);
  background: rgba(217, 164, 65, .12);
  border: 1px solid var(--linea);
  border-radius: 12px;
  margin-bottom: 16px;
}
.tarjeta h3 {
  font-family: var(--display);
  font-size: 1.24rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 10px;
}
.tarjeta p { color: #bdb5aa; font-size: .93rem; margin: 0 0 10px; }
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta ul { margin: 10px 0 0; padding-left: 18px; color: #bdb5aa; font-size: .9rem; }
.tarjeta li { margin-bottom: 5px; }

/* =====================================================================
   EL PORTAFOLIO
   ===================================================================== */
.proyecto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 26px;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.proyecto__foto { min-height: 300px; background: var(--tinta-3); }
.proyecto__foto img { width: 100%; height: 100%; object-fit: cover; }
.proyecto__texto { padding: 34px; }
.proyecto__texto h3 {
  font-family: var(--display);
  font-size: 1.4rem;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.proyecto__texto p { color: #bdb5aa; font-size: .94rem; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.etiquetas span {
  padding: 5px 11px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fuego);
  background: rgba(217, 164, 65, .1);
  border: 1px solid var(--linea);
  border-radius: 999px;
}

/* =====================================================================
   LOS PRECIOS
   ===================================================================== */
.precio {
  position: relative;
  padding: 30px 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; }
.precio--destacado::after {
  content: 'El más pedido';
  position: absolute;
  top: -13px;
  left: 26px;
  padding: 4px 12px;
  font-size: .68rem;
  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.28rem;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.precio .valor {
  font-family: var(--display);
  font-size: 2rem;
  color: var(--fuego);
  margin: 10px 0 4px;
}
.precio .valor small { font-size: .78rem; color: var(--texto-2); font-family: var(--sans); }
.precio ul { margin: 18px 0 22px; padding-left: 18px; color: #bdb5aa; font-size: .9rem; flex: 1; }
.precio li { margin-bottom: 7px; }

.aviso {
  margin-top: 30px;
  padding: 18px 22px;
  font-size: .9rem;
  color: #cfc7bc;
  border-left: 4px solid var(--aviso);
  background: rgba(255, 118, 87, .08);
  border-radius: 8px;
}

/* =====================================================================
   SOBRE MÍ
   ===================================================================== */
.yo { display: grid; grid-template-columns: .72fr 1fr; gap: 44px; align-items: start; }
.yo__texto p { color: #c4bcb1; }
.yo__texto strong { color: var(--papel); }

/* =====================================================================
   CONTACTO
   ===================================================================== */
.contacto-caja {
  padding: 44px;
  text-align: center;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.contacto-caja h2 { margin-bottom: 12px; }
.contacto-caja .grupo-botones { justify-content: center; }
.datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
  margin-top: 28px;
  font-size: .9rem;
  color: var(--texto-2);
}
.datos a { color: var(--fuego); }

/* =====================================================================
   EL PIE
   ===================================================================== */
.pie {
  padding: 40px 0 34px;
  background: #0C0A08;
  border-top: 1px solid var(--linea);
  font-size: .85rem;
  color: var(--texto-3);
}
.pie-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}
.pie a { color: var(--texto-2); }
.pie a:hover { color: var(--fuego); }
.pie__credito {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(217, 164, 65, .1);
  font-size: .76rem;
  color: var(--texto-3);
  text-align: center;
}

/* =====================================================================
   EL CELULAR
   ---------------------------------------------------------------------
   ⚠️ Una sola versión del menú. (En la web de XIHU esto estaba repetido
   12 veces y los colores salían mezclados: no repetir ese error.)
   ===================================================================== */
@media (max-width: 900px) {
  .menu-btn { display: flex; position: fixed; top: 12px; right: 14px; z-index: 60; }

  .menu-toggle:checked ~ .nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 55;
    max-height: 100dvh;
    overflow-y: auto;
    padding: 70px 14px 22px;
    background: var(--tinta);
    border-bottom: 3px solid var(--fuego);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .7);
    animation: menuCae .24s cubic-bezier(.2, .8, .3, 1) both;
  }
  @keyframes menuCae {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .menu-toggle:checked ~ .nav a {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    padding: 14px 16px;
    font-size: 1rem;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .06);
    border-left: 5px solid var(--fuego);
    border-radius: 9px;
  }
  .menu-toggle:checked ~ .nav a.nav-cta {
    margin-top: 10px;
    background: var(--fuego);
    color: #1a1408;
    border-left-color: var(--fuego);
    text-align: center;
  }
  .nav { display: none; }

  .portada { padding: 56px 0 64px; }
  .portada-rejilla { grid-template-columns: 1fr; gap: 34px; }
  .shaka-caja { max-width: 400px; margin: 0 auto; }
  .cifras { grid-template-columns: 1fr; }
  .rejilla--2, .rejilla--3 { grid-template-columns: 1fr; }
  .proyecto { grid-template-columns: 1fr; }
  .proyecto__foto { min-height: 220px; }
  .proyecto__texto { padding: 26px; }
  .yo { grid-template-columns: 1fr; gap: 26px; }
  .contacto-caja { padding: 30px 20px; }
  .seccion { padding: 56px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .menu-toggle:checked ~ .nav { animation: none; }
  * { transition: none !important; }
}

/* Al imprimir, sin fondo oscuro ni retícula */
@media print {
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .cabecera, .pie, .menu-btn { display: none; }
}

/* =====================================================================
   LA HISTORIA DE SHAKA
   ---------------------------------------------------------------------
   Va debajo de la órbita, en la portada. Es lo primero que la gente
   pregunta, así que se responde ahí mismo, sin que toque ir a buscarlo.

   Es el único texto centrado del sitio: por eso se nota y se lee.
   ===================================================================== */
.shaka-historia {
  max-width: 620px;
  margin: 54px auto 0;
  padding: 22px 26px;
  text-align: center;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--texto-2);
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.shaka-historia b {
  color: var(--fuego);
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.shaka-historia strong { color: var(--papel); }
.shaka-historia a {
  display: inline-block;
  margin-top: 10px;
  font-weight: 700;
  color: var(--madera);
}
.shaka-historia a:hover { color: var(--fuego); }
/* =====================================================================
   EL MATRIX DE SHAKA · el cierre de la portada
   ---------------------------------------------------------------------
   Va al final, después del contacto. Los puntos se arman hasta formar
   su cara (ver el código al final del index.html).

   El marco tiene el mismo fondo Tierra que la página, así los puntos
   parecen flotar en vez de estar dentro de un cuadro.
   ===================================================================== */
.matrix-seccion {
  padding: 76px 0 60px;
  text-align: center;
  border-top: 1px solid var(--linea);
}
.matrix-seccion .sub {
  margin-left: auto;
  margin-right: auto;
}

.matrix-marco {
  width: min(100%, 620px);
  margin: 34px auto 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  /* El mismo marrón del fondo, con un halo dorado tenue detrás */
  background:
    radial-gradient(circle at 50% 45%, rgba(232, 163, 61, .09), transparent 62%),
    var(--tinta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.matrix-caja,
.matrix-marco img {
  width: 100%;
  height: 100%;
  display: block;
}

.matrix-pie {
  margin-top: 22px;
  font-family: var(--display);
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.matrix-pie b { color: var(--fuego); }

@media (max-width: 700px) {
  .matrix-seccion { padding: 56px 0 44px; }
  .matrix-marco { margin-top: 26px; }
}