/* =============================================================================
   custom.css — Capa estructural y de marca sobre el tema Litho.
   El tema (style.css / responsive.css) aporta tipografía, colores y utilidades;
   acá vive lo que el tema resolvía con jQuery/Isotope/WOW y no reutilizamos.

   Orden de carga (ver BaseLayout.astro):
     bootstrap-lite.css → font-icons → style.css → responsive.css → custom.css

   Tokens de marca:
     --c-ink      texto principal
     --c-muted    texto secundario
     --c-line     bordes
     --c-accent   acento (ocre) — coincide con las imágenes OG
     --c-bg       fondo base
   ========================================================================== */

:root {
  /* --- Semántica de tokens ---
     ink          texto principal
     body         texto corrido (prosa)
     muted        texto secundario
     line         bordes
     soft         superficie atenuada (secciones alternas, cajas)
     surface      superficie elevada (cards, header, inputs)
     bg           fondo de página
     accent       relleno de acento (botones, marcas)
     accent-hover relleno de acento en hover
     accent-text  acento legible COMO TEXTO sobre superficie (≥4.5:1)
     invert-*     superficies oscuras fijas (banda CTA, footer) — NO dependen
                  de ink/bg, para que sigan siendo oscuras en modo claro */
  color-scheme: light;
  --c-ink: #1b1c20;
  --c-body: #33363c;
  --c-muted: #6b6f76;
  --c-line: #e6e7e9;
  --c-soft: #f6f6f7;
  --c-surface: #ffffff;
  --c-bg: #ffffff;
  --c-accent: #c89965;
  --c-accent-hover: #b1834f;
  --c-accent-text: #96652f;
  /* Texto sobre el relleno de acento. Es oscuro a propósito: blanco sobre
     #c89965 da 2.5:1 (insuficiente). Oscuro da ~6.6:1. Igual en ambos esquemas
     porque el relleno de acento no cambia. */
  --c-on-accent: #1b1c20;
  --c-invert-bg: #1b1c20;
  --c-invert-ink: #ffffff;
  --c-invert-muted: #c9cbd1;
  --c-invert-line: #2c2e34;
  --c-header-bg: rgba(255, 255, 255, 0.92);
  --radius: 10px;
  --maxw: 1140px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --c-ink: #f1f2f4;
    --c-body: #d3d6db;
    --c-muted: #a3a7ae;
    --c-line: #2c2e35;
    --c-soft: #1a1b1f;
    --c-surface: #17181d;
    --c-bg: #131418;
    --c-accent: #c89965;
    --c-accent-hover: #d7ab7c;
    --c-accent-text: #d9b486;
    --c-invert-bg: #0e0f12;
    --c-invert-ink: #f1f2f4;
    --c-invert-muted: #a3a7ae;
    --c-invert-line: #26282e;
    --c-header-bg: rgba(19, 20, 24, 0.9);
  }
}

body {
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

/* Neutraliza los colores de enlace del tema Litho (incluido su azul #0038e3 en
   :hover, que en modo oscuro sería ilegible). Cada componente declara su color. */
a,
a:hover,
a:focus,
a:active {
  color: inherit;
}

.container {
  max-width: var(--maxw);
}

/* --- Accesibilidad --------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--c-invert-bg);
  color: var(--c-invert-ink);
  padding: 12px 18px;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
}

/* Texto invertido para el fallback sin JavaScript: visualmente se lee normal,
   pero en el HTML crudo queda al revés (ningún bot lo detecta como
   correo/teléfono). Ver src/pages/contacto.astro */
.obf {
  direction: rtl;
  unicode-bidi: bidi-override;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Header ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-header-bg);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--c-ink);
}
.brand__logo {
  display: block;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand__name {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.brand__role {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
@media (max-width: 480px) {
  .brand__logo {
    width: 38px;
    height: 38px;
  }
  .brand__role {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav__link {
  color: var(--c-ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.main-nav__link:hover,
.main-nav__link[aria-current='page'] {
  border-bottom-color: var(--c-accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- Botones --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease,
    transform 0.18s ease;
  cursor: pointer;
}
.btn--accent {
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.btn--accent:hover {
  background: var(--c-accent-hover);
  color: var(--c-on-accent);
  transform: translateY(-1px);
}
.btn--outline {
  border-color: var(--c-line);
  color: var(--c-ink);
  background: var(--c-surface);
}
.btn--outline:hover {
  border-color: var(--c-ink);
  color: var(--c-ink);
}
.btn--lg {
  padding: 15px 28px;
  font-size: 1rem;
}

/* Los enlaces que muestran el dato de contacto real no van en mayúsculas
   (el tema aplica text-transform: uppercase a .btn) ni con tracking amplio:
   el correo debe leerse literal. */
[data-contact-value],
.obf {
  text-transform: none;
  letter-spacing: normal;
}

/* --- Nav móvil (el tema usaba jQuery) -------------------------------------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-surface);
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  width: 20px;
  margin: 0 auto;
  background: var(--c-ink);
}
.nav-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 76px 0 0 0;
  z-index: 40;
  background: var(--c-surface);
  padding: 28px 24px;
  overflow-y: auto;
}
.mobile-nav[hidden] {
  display: none;
}
.mobile-nav__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-nav__link {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink);
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: 500;
}
.mobile-nav__link[aria-current='page'] {
  color: var(  --c-accent-text);
}
.mobile-nav__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.95rem;
}

@media (max-width: 991px) {
  .main-nav,
  .header-actions__wa,
  .header-actions .btn--accent {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
}

/* --- Secciones ------------------------------------------------------------- */
.section {
  padding: 84px 0;
}
.section--tight {
  padding: 56px 0;
}
.section--soft {
  background: var(--c-soft);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.section__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(  --c-accent-text);
  font-weight: 600;
  margin-bottom: 14px;
}
.section__title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 16px;
}
.section__lead {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--c-muted);
  max-width: 62ch;
  margin: 0;
}
.section__head {
  margin-bottom: 44px;
}

/* --- Hero ------------------------------------------------------------------ */
.hero {
  padding: 96px 0 72px;
  border-bottom: 1px solid var(--c-line);
  position: relative;
  overflow: hidden;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 22px;
}
.hero__eyebrow::before {
  content: '';
  width: 34px;
  height: 2px;
  background: var(--c-accent);
}
.hero__title {
  font-size: clamp(2.3rem, 6vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0 0 22px;
  max-width: 20ch;
}
.hero__title em {
  font-style: normal;
  color: var(  --c-accent-text);
}
.hero__subtitle {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--c-muted);
  max-width: 60ch;
  margin: 0 0 34px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 44px;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 991px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
.hero__aside {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-soft);
  padding: 34px;
}
.hero__stat {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--c-line);
}
.hero__stat-value {
  display: block;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--c-ink);
}
.hero__stat-label {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.hero__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero__list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.98rem;
  font-weight: 500;
}
.hero__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 2px;
  background: var(--c-accent);
}

/* --- Trust bar ------------------------------------------------------------- */
.trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 34px;
}
.trust__label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  width: 100%;
  margin-bottom: 4px;
}
.trust__item {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  padding-right: 34px;
  border-right: 1px solid var(--c-line);
}
.trust__item:last-child {
  border-right: 0;
  padding-right: 0;
}

/* --- Rejilla de tarjetas --------------------------------------------------- */
.grid {
  display: grid;
  gap: 24px;
}
.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 991px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  border-color: var(--c-accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(27, 28, 32, 0.07);
}
.card__icon {
  font-size: 1.5rem;
  color: var(  --c-accent-text);
}
.card__title {
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}
.card__text {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--c-muted);
  margin: 0;
}
.card__more {
  margin-top: auto;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--c-accent-text);
}

/* --- Imágenes (ilustraciones PNG con transparencia) ------------------------ */
.media {
  display: block;
  width: 100%;
  height: auto;
}

/* Tarjeta con ilustración: la imagen ocupa el ancho completo, sin padding */
.card--media {
  padding: 0;
  overflow: hidden;
}
.card--media .media {
  align-self: stretch;
}
.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 24px 28px 28px;
}

/* Cabecera ilustrada de páginas de servicio y caso */
.page-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 991px) {
  .page-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.page-hero .media {
  max-width: 520px;
}

/* Imagen del hero del home, dentro del aside */
.hero__aside .media {
  margin-bottom: 24px;
}

/* Bloques de ilustración suelta (sobre mí, toluca) */
.figure-block {
  max-width: 640px;
}
@media (max-width: 991px) {
  .figure-block {
    max-width: 100%;
  }
}

/* --- Casos / proyectos ----------------------------------------------------- */
.project-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260px;
  padding: 30px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.project-card:hover {
  border-color: var(--c-accent);
  transform: translateY(-3px);
}
.project-card__sector {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(  --c-accent-text);
  font-weight: 600;
}
.project-card__title {
  font-size: 1.3rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 12px 0 10px;
}
.project-card__summary {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-muted);
  margin: 0;
}
.project-card__client {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
  font-size: 0.88rem;
  color: var(--c-ink);
  font-weight: 500;
}

/* Variante con ilustración. Va DESPUÉS de la regla base a propósito: misma
   especificidad, gana la última. Si se mueve arriba, el padding: 0 se pierde. */
.project-card--media {
  padding: 0;
  min-height: 0;
  overflow: hidden;
}
.project-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 24px 28px 22px;
}
.project-card--media .project-card__client {
  margin: 0;
  padding: 16px 28px;
  border-top: 1px solid var(--c-line);
}
.project-card--media .media {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-card--media:hover .media {
  transform: scale(1.015);
}

/* --- Métricas (opcional) --------------------------------------------------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin: 32px 0;
}
.metric {
  padding: 22px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-soft);
}
.metric__value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  line-height: 1.1;
}
.metric__label {
  font-size: 0.86rem;
  color: var(--c-muted);
  margin-top: 6px;
}

/* --- FAQ ------------------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--c-line);
}
.faq__item {
  border-bottom: 1px solid var(--c-line);
}
.faq__q {
  cursor: pointer;
  padding: 20px 0;
  font-size: 1.05rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__q::after {
  content: '+';
  color: var(  --c-accent-text);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
}
.faq__item[open] .faq__q::after {
  content: '−';
}
.faq__a {
  padding: 0 0 22px;
  margin: 0;
  color: var(--c-muted);
  line-height: 1.7;
  max-width: 70ch;
}

/* --- Breadcrumbs ----------------------------------------------------------- */
.breadcrumbs {
  font-size: 0.82rem;
  color: var(--c-muted);
  padding: 20px 0 0;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumbs li + li::before {
  content: '/';
  margin-right: 8px;
  color: var(--c-line);
}
.breadcrumbs a {
  color: var(--c-muted);
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--c-ink);
}

/* --- Prosa (contenido Markdown) -------------------------------------------- */
.prose {
  max-width: 72ch;
}
.prose h2 {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin: 40px 0 14px;
  font-weight: 600;
}
.prose h3 {
  font-size: 1.15rem;
  margin: 28px 0 10px;
  font-weight: 600;
}
.prose p,
.prose li {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--c-body);
}
.prose ul {
  padding-left: 22px;
  margin: 14px 0;
}
.prose li {
  margin-bottom: 6px;
}
.prose strong {
  color: var(--c-ink);
}
.prose a {
  color: var(  --c-accent-text);
}

/* --- CTA final ------------------------------------------------------------- */
.cta-band {
  background: var(--c-invert-bg);
  color: var(--c-invert-ink);
  border-radius: var(--radius);
  padding: 56px;
}
.cta-band h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  color: var(--c-invert-ink);
}
.cta-band p {
  color: var(--c-invert-muted);
  max-width: 60ch;
  margin: 0 0 26px;
  line-height: 1.65;
}
.cta-band .btn--outline {
  background: transparent;
  color: var(--c-invert-ink);
  border-color: var(--c-invert-line);
}
.cta-band .btn--outline:hover {
  border-color: var(--c-invert-ink);
  color: var(--c-invert-ink);
}

/* --- Formulario ------------------------------------------------------------ */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.form-field label {
  font-size: 0.86rem;
  font-weight: 600;
}
.form-field input,
.form-field textarea,
.form-field select {
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.98rem;
  font-family: inherit;
  background: var(--c-surface);
  color: var(--c-ink);
}
.form-field textarea {
  min-height: 140px;
  resize: vertical;
}
.form-note {
  font-size: 0.84rem;
  color: var(--c-muted);
  line-height: 1.6;
}
.form-note a,
.link {
  color: var(--c-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Footer ---------------------------------------------------------------- */
.site-footer {
  background: var(--c-invert-bg);
  color: var(--c-invert-muted);
  padding: 64px 0 28px;
  margin-top: 0;
}
.site-footer a {
  color: var(--c-invert-muted);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--c-invert-ink);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--c-invert-line);
}
@media (max-width: 991px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.site-footer__logo {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
}
.site-footer__name {
  font-size: 1.3rem;
  color: var(--c-invert-ink);
  font-weight: 600;
  margin: 0 0 10px;
}
.site-footer__desc {
  font-size: 0.94rem;
  line-height: 1.65;
  margin: 0 0 16px;
  max-width: 40ch;
}
.site-footer__address {
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.8;
}
.site-footer__title {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-invert-muted);
  margin: 0 0 16px;
  font-weight: 600;
}
.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.93rem;
}
.site-footer__social {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  font-size: 1.15rem;
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding-top: 22px;
  font-size: 0.84rem;
  color: var(--c-invert-muted);
}
.site-footer__bottom p {
  margin: 0;
}