/*
 * GARCIA IT SERVICES — rediseño home (PROMPT 5, 2a pasada)
 * FRAMEWORK: django (theme "Around" + Bootstrap ya existentes en el proyecto)
 *
 * PASO 0   MINIMALISTA LIGHT (tel. 0659129251 -> suma dig. 40 -> mod5=0) — sin cambio
 * PASO 0b  DASHBOARD (VARIANTE=2 -> mod5=2) — mantenido según indicación del cliente
 * PASO 0.6 REFERENCIA — index1.html (Tela Studio) usado ÚNICAMENTE como referencia de
 *          orden de secciones (HERO > DIFF > SERVICIOS > APROPOS > AVIS > FAQ > CTA) —
 *          su paleta, tipografía y copy NO se usan en absoluto (sector no afín: bienestar
 *          vs. MSP/IT).
 * PASO 1   Sector: MSP / IT para TPE-PME, intervention physique locale + urgence 24/7.
 *          Registro emocional propio: CONFIANZA TÉCNICA + FIABILIDAD + CERCANÍA LOCAL
 *          + capacidad de URGENCIA — no "energía startup SaaS".
 * PASO 2   Paleta deducida de cero (paleta anterior #FAF9F6/#24313C/#B6672E descartada
 *          a pedido del cliente, no reutilizada como punto de partida):
 *   --bg        #F6F3EC  fondo cálido-neutro (papel), no blanco frío
 *   --bg-alt    #ECE5D5  paneles/celdas secundarias
 *   --ink       #1C2126  texto principal
 *   --ink-soft  #565F66  texto secundario
 *   --accent    #1E2C3B  azul marino — ANCLADO al logo real confirmado (garcia-logo.png,
 *               monograma "GS" navy+teal) en vez de ser una elección arbitraria de tabla
 *   --accent-2  #B34F1B  terracota/ámbar quemado — urgencia/calidez, contraste cálido
 *               deliberado frente al navy frío del logo (verificado AA: texto blanco
 *               sobre --accent-2 ≈ 5.3:1, texto --accent-2 sobre --bg ≈ 4.8:1)
 *   --dark-bg   #171A1E  momento de alto contraste (CTA final) — único fondo oscuro
 *               "de sección" de la página, aparte del footer
 * PASO 2c  Tempering + checklist anti-genérico aplicado:
 *   · Display: Bitter (slab serif) — no geométrica tipo Space Grotesk/Inter-titular;
 *     un slab transmite solidez/ingeniería, coherente con un MSP (infraestructura),
 *     distinto del serif editorial (Newsreader/Fraunces) típico de bienestar/lifestyle.
 *   · Body: Work Sans — más cálido que Inter, evita el "default SaaS" más obvio.
 *   · SERVICIOS ya no repite el mismo tratamiento "grid con bordes" que DIFF: ahora es
 *     una lista editorial asimétrica (columna de título + filas con separador fino),
 *     para variar el ritmo entre secciones (checklist PASO 2c, punto 6).
 *   · CTA FINAL pasa a fondo oscuro completo (--dark-bg) — momento de alto contraste
 *     dramático que antes no existía (checklist PASO 2c, punto 8).
 *   · Sin eyebrows con guion largo, sin numeración 01/02/03 en tarjetas.
 */

:root {
  --bg:        #F6F3EC;
  --bg-alt:    #ECE5D5;
  --ink:       #1C2126;
  --ink-soft:  #565F66;
  --accent:    #1E2C3B;
  --accent-2:  #B34F1B;
  --line:      #DCD3BE;
  --dark-bg:   #171A1E;
  --dark-fg:   #F4F1EA;
  --dark-muted: rgba(244,241,234,.62);
  --font-display: "Bitter", Georgia, serif;
  --font-body:    "Work Sans", sans-serif;
  --font-mono:    "JetBrains Mono", monospace;
}

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}

.gis-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.gis-mono {
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

.gis-eyebrow {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- HEADER ---------- */
.gis-header {
  background-color: var(--bg);
  border-bottom: 1px solid var(--line);
}

.gis-logo-img {
  height: 34px;
  width: auto;
  display: block;
}

.gis-nav-link {
  color: var(--ink);
  font-weight: 500;
}

.gis-phone-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  color: var(--accent);
  font-size: 0.9rem;
}

/* ---------- HERO (DASHBOARD: título left + foto real derecha con chip flotante) ---------- */
.gis-hero-media {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3.3;
}

.gis-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gis-hero-chip {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  background-color: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.9rem 1.1rem;
}

.gis-badge-urgent {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--accent-2);
  color: #fff;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.gis-badge-urgent .gis-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #fff;
  animation: gis-pulse 1.8s ease-in-out infinite;
}

@keyframes gis-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---------- DIFFÉRENCIATION (DASHBOARD: grid keywords, sin gaps, con bordes) ---------- */
.gis-diff-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1px;
  background-color: var(--line);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  overflow: hidden;
}

@media (min-width: 576px) {
  .gis-diff-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .gis-diff-grid { grid-template-columns: repeat(3, 1fr); }
}

.gis-diff-cell {
  background-color: var(--bg);
  padding: 1.75rem 1.5rem;
}

.gis-diff-cell.is-urgent {
  background-color: var(--bg-alt);
  box-shadow: inset 3px 0 0 var(--accent-2);
}

/* ---------- SERVICIOS (lista editorial asimétrica — distinta del grid de DIFF) ---------- */
.gis-services-head p {
  max-width: 28ch;
}

.gis-service-row {
  border-top: 1px solid var(--line);
  padding: 1.75rem 0;
}

.gis-service-row:last-child {
  border-bottom: 1px solid var(--line);
}

/* ---------- APROPOS (DASHBOARD: fila de stats + foto real + texto) ---------- */
.gis-about-media {
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3.4;
}

.gis-about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gis-stats-row {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.gis-stat {
  padding: 1.5rem 0;
}

.gis-stat-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--accent);
  line-height: 1;
}

.gis-stat-label {
  color: var(--ink-soft);
  font-size: 0.875rem;
}

/* ---------- AVIS (placeholders) ---------- */
.gis-avis-card {
  background-color: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 1.75rem;
  height: 100%;
}

.gis-avis-placeholder-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  margin-bottom: 0.75rem;
}

/* ---------- FAQ (DASHBOARD: 2 col preguntas/respuesta) ---------- */
.gis-faq-question {
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  width: 100%;
  text-align: left;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}

.gis-faq-answer {
  color: var(--ink-soft);
}

/* ---------- CTA FINAL + CONTACTO ----------
   Estructura tomada de index1.html (referencia de orden/estructura, PASO 0.6):
   split 2 col — texto izquierda / teléfono grande + email + botón derecha,
   sobre foto real con overlay oscuro. Colores, wordmark y copy son propios de
   Garcia IT (no se reutilizan los de la referencia). Momento de alto contraste
   de la página. */
.gis-cta-bar {
  position: relative;
  overflow: hidden;
  color: var(--dark-fg);
  background:
    linear-gradient(100deg, color-mix(in oklab, var(--dark-bg) 96%, transparent) 0%, color-mix(in oklab, var(--dark-bg) 90%, transparent) 55%, color-mix(in oklab, var(--dark-bg) 80%, transparent) 100%),
    url("/static/assets/img/garcia/oficina.jpeg") center 30% / cover no-repeat;
}

.gis-cta-wordmark {
  position: absolute;
  right: -0.05em;
  bottom: -0.12em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(70px, 13vw, 190px);
  line-height: 1;
  color: rgba(244,241,234,.06);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -.02em;
}

.gis-cta-bar .wrap,
.gis-cta-bar .container {
  position: relative;
  z-index: 1;
}

.gis-cta-bar .gis-display {
  color: var(--dark-fg);
}

.gis-cta-bar .gis-eyebrow {
  color: var(--accent-2);
}

.gis-cta-text {
  color: var(--dark-muted);
  max-width: 34ch;
}

.gis-cta-right {
  text-align: left;
}

@media (min-width: 992px) {
  .gis-cta-right { text-align: right; }
}

.gis-cta-phone {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  color: var(--dark-fg);
  text-decoration: none;
  margin-bottom: 0.6rem;
}

.gis-cta-phone:hover {
  opacity: .85;
}

.gis-cta-email {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--dark-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gis-cta-email:hover {
  color: var(--dark-fg);
}

.gis-cta-btn-row {
  margin-top: 1.5rem;
  display: flex;
  justify-content: flex-start;
}

@media (min-width: 992px) {
  .gis-cta-btn-row { justify-content: flex-end; }
}

.gis-btn-copper {
  background-color: var(--accent-2);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  display: inline-block;
  text-decoration: none;
}

.gis-btn-copper:hover {
  filter: brightness(1.08);
  color: #fff;
}

/* ---------- FOOTER (DASHBOARD: barra full-width, segmentos) ---------- */
.gis-footer {
  background-color: var(--ink);
  color: rgba(255,255,255,0.75);
}

.gis-footer .gis-logo-img {
  height: 28px;
}

.gis-footer-segment {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.65);
}

.gis-footer-segment strong {
  color: rgba(255,255,255,0.9);
  font-weight: 500;
}