/* ── Pacha Wabi — Pachawabi Tech ──────────────────────────────────────────
   Hoja de estilo propia (igual criterio que ajedrez.css / contacto.css /
   donaciones.css): no depende del bundle de Tailwind compilado, así ninguna
   clase queda sin efecto. Misma paleta y tipografía (Cinzel / Raleway) que
   el resto del sitio. Estructura de referencia: Pachawabi Chess — recuadros
   independientes por elemento, campos que desaparecen si están vacíos. */

.pwtech { max-width: 880px; margin: 0 auto; color: #C9C0A8; }

/* Contenedor principal de la página (el <section> que envuelve .pwtech).
   Mismo ajuste y mismo motivo que .pwchess-page-section en ajedrez.css:
   las clases de Tailwind que llevaba antes (py-24, bg-[#0D0A07],
   min-h-screen, y el pt-16 de <main> en header-pachawabi.php) no están en
   el bundle compilado (assets/app.css) y no tenían ningún efecto real, por
   lo que el contenido quedaba pegado contra el encabezado fijo. */
.pwtech-page-section {
  padding: 80px 24px 96px;
  background: #0D0A07;
  min-height: 100vh;
}

.pwtech-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(30px, 5vw, 48px);
  letter-spacing: 0.1em;
  color: #F2EAD3;
  margin: 0 0 26px;
}

/* Más aire entre encabezado/descripción y el primer proyecto (punto 7) */
.pwtech-intro {
  font-size: 16px; line-height: 1.75; font-weight: 300;
  color: #C9C0A8; max-width: 640px; margin: 0 0 88px;
}

.pwtech-section-title {
  font-family: 'Cinzel', serif;
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: #C9952B; margin: 0 0 30px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(201, 149, 43, 0.18);
}

.pwtech-projects { display: flex; flex-direction: column; gap: 28px; }

.pwtech-empty {
  color: #6B5A40; font-size: 13px; font-weight: 300; font-style: italic;
  padding: 6px 0 4px;
}

/* Recuadro de proyecto */
.pwtech-card { border: 1px solid rgba(201, 149, 43, 0.15); background: #100D08; padding: 30px; }

.pwtech-card-title {
  font-family: 'Cinzel', serif; font-size: 15px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #F2C94C; margin: 0 0 14px;
}

.pwtech-card-desc {
  font-size: 13.5px; line-height: 1.7; font-weight: 300;
  color: #9A8060; margin: 0 0 20px;
}

/* Si un recuadro no tiene el siguiente bloque (capturas/campos/enlaces),
   el último elemento visible no debe dejar margen inferior colgando. */
.pwtech-card > *:last-child { margin-bottom: 0; }

.pwtech-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 20px; }
.pwtech-photos.single { grid-template-columns: 1fr; }
.pwtech-photos img { width: 100%; height: 160px; object-fit: cover; display: block; }
.pwtech-photos.single img { height: 210px; }

.pwtech-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px 22px; margin: 0 0 20px;
}
.pwtech-field .label {
  font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: #C9952B; margin: 0 0 5px;
}
.pwtech-field .value { font-size: 13px; color: #C9C0A8; font-weight: 300; line-height: 1.5; margin: 0; }

/* Enlaces: fila simple, solo los que tienen URL cargada (punto 4/5) */
.pwtech-links {
  margin: 0; font-family: 'Cinzel', serif; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.pwtech-links a { color: #C9952B; text-decoration: none; transition: color .25s ease; }
.pwtech-links a:hover { color: #F2C94C; text-decoration: underline; }
.pwtech-links-sep { color: #6B5A40; margin: 0 10px; }