/**
 * Style CSS — Jeff Zambrano Portfolio Theme
 *
 * Componentes y utilidades. Consume var(). No define variables.
 * Estructura SMACSS: Base → Layout → Module → State → Theme
 *
 * @package     JeffTheme
 * @author      Developer - Agencia OH WOW! <development@agencia.ohwow.es>
 * @version     1.1.0
 */

/* ============================================================
   BASE — Estilos fundamentales, reset, tipografía
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid var(--color-border);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  color: var(--color-foreground);
  background-color: var(--color-background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-base), color var(--transition-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tighter);
}

a {
  color: inherit;
  text-decoration: none;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

input, select, textarea {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: inherit;
  background: none;
  outline: none;
}

::selection {
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
}

/* ============================================================
   LAYOUT — Estructura de página
   ============================================================ */

.l-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.l-section {
  padding-block: var(--spacing-section-sm);
}

.l-section--lg {
  padding-block: var(--spacing-section);
}

.l-grid {
  display: grid;
  gap: var(--spacing-gap);
}

.l-grid--2 { grid-template-columns: 1fr; }
.l-grid--3 { grid-template-columns: 1fr; }
.l-grid--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .l-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .l-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

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

@media (min-width: 1024px) {
  .l-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   MODULE — Header
   ============================================================ */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-block: var(--spacing-5);
  transition: padding var(--transition-base), background-color var(--transition-base);
}

.header--scrolled {
  padding-block: var(--spacing-3);
  background-color: rgba(var(--color-background-rgb), 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.header__logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tighter);
  position: relative;
  z-index: 10;
}

.header__logo-dot { color: var(--color-primary); }

/* ─── Nav pill (desktop) ─── */
.nav-pill {
  display: none;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background-color: var(--nav-pill-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

@media (min-width: 768px) {
  .nav-pill { display: flex; }
}

.nav-pill__link {
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: rgba(var(--color-foreground-rgb), 0.6);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-pill__link:hover { color: var(--color-foreground); }

/* Activo: light=accent(cyan), dark=primary(lime) */
.nav-pill__link--active {
  background-color: var(--color-accent);
  color: var(--color-accent-fg);
}

.dark .nav-pill__link--active {
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
}

/* ─── Header actions ─── */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

/* Theme toggle */
.theme-toggle {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted-fg);
  transition: color var(--transition-fast);
}

.theme-toggle:hover { color: var(--color-foreground); }

.theme-toggle__icon {
  width: 1.0625rem;
  height: 1.0625rem;
  display: none;
}

.theme-toggle__icon--active { display: block; }

/* Mobile hamburger */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  color: var(--color-foreground);
}

@media (min-width: 768px) {
  .menu-toggle { display: none; }
}

/* ─── Mobile nav overlay ─── */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background-color: rgba(var(--color-background-rgb), 0.98);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.mobile-nav.is-open {
  display: flex;
  opacity: 1;
}

.mobile-nav__link {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-foreground);
  transition: color var(--transition-fast);
}

.mobile-nav__link:hover,
.mobile-nav__link--active { color: var(--color-primary); }

/* ─── CTA button del header ─── */
/* light = cyan, dark = lime */
.btn-cta-header {
  display: none;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-7);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-accent);
  color: var(--color-accent-fg);
  transition: opacity var(--transition-fast);
}

.dark .btn-cta-header {
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
}

.btn-cta-header:hover { opacity: 0.9; }
.btn-cta-header__icon { width: 0.875rem; height: 0.875rem; }

@media (min-width: 768px) {
  .btn-cta-header { display: inline-flex; }
}

/* ============================================================
   MODULE — Botones genéricos
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-7);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: opacity var(--transition-fast);
  cursor: pointer;
}

.btn:hover { opacity: 0.9; }

/* Primario: light=accent, dark=primary */
.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-accent-fg);
}

.dark .btn--primary {
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
}

/* Ghost (borde) */
.btn--ghost {
  border: 1px solid rgba(var(--color-foreground-rgb), 0.3);
  color: var(--color-foreground);
  background-color: transparent;
}

.btn--ghost:hover {
  background-color: rgba(var(--color-foreground-rgb), 0.05);
  opacity: 1;
}

/* CTA especial (teal/cyan hard) */
.btn--cta {
  background-color: var(--color-cta-bg-light);
  color: var(--color-cta-fg-light);
}

.dark .btn--cta {
  background-color: var(--color-cta-bg-dark);
  color: var(--color-cta-fg-dark);
}

.btn__icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--transition-fast);
}

.btn:hover .btn__icon { transform: translate(2px, -2px); }

/* ============================================================
   MODULE — Section Label
   ============================================================ */

.section-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-12);
}

.section-label__dot {
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  flex-shrink: 0;
}

.section-label__text {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary);
}

/* ─── Section header con punto primario (reutilizable) ─── */
.section-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
}

.section-header__icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* ============================================================
   MODULE — Hero
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--header-height);
}

.hero__inner {
  position: relative;
  z-index: 10;
  width: 100%;
  text-align: center;
}

/* Skills laterales — posición dentro del hero__inner con padding lateral */
.hero__name-wrap {
  position: relative;
  /* Padding reserva espacio para las skills absolutas a cada lado */
  padding-inline: clamp(150px, 16vw, 200px);
}

.hero__skills-left,
.hero__skills-right {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: var(--spacing-2);
  width: clamp(130px, 14vw, 170px);
}

.hero__skills-left  { left: 0; }
.hero__skills-right { right: 0; align-items: flex-end; }

@media (min-width: 1024px) {
  .hero__skills-left,
  .hero__skills-right { display: flex; }
}

.hero__skill {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-muted-fg);
}

.hero__skill-dot {
  display: block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  flex-shrink: 0;
}

/* Mobile skills row */
.hero__skills-mobile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-4) var(--spacing-2);
  margin-top: var(--spacing-4);
}

@media (min-width: 1024px) {
  .hero__skills-mobile { display: none; }
}

.hero__skill-mobile {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-muted-fg);
}

/* Nombre gigante */
.hero__name {
  font-family: var(--font-display);
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-bold);
  line-height: 0.85;
  letter-spacing: -0.05em;
  /* Gradiente vertical foreground → 40% transparencia */
  background: linear-gradient(
    to bottom,
    var(--color-foreground) 0%,
    rgba(var(--color-foreground-rgb), 0.8) 50%,
    rgba(var(--color-foreground-rgb), 0.4) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Imágenes inclinadas del hero */
.hero__images {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--spacing-4);
  margin-top: var(--spacing-8);
  padding-inline: var(--spacing-6);
}

@media (min-width: 768px) {
  .hero__images { gap: var(--spacing-6); margin-top: var(--spacing-12); }
}

.hero__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  width: 180px;
  height: 240px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .hero__image-wrap { width: 260px; height: 340px; }
}

/* Rotaciones del diseño original */
.hero__image-wrap:nth-child(1) { transform: rotate(-8deg); }
.hero__image-wrap:nth-child(2) { transform: translateY(-20px); }
.hero__image-wrap:nth-child(3) { transform: rotate(8deg); }

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: var(--spacing-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: rgba(var(--color-foreground-rgb), 0.5);
  animation: bounce 2s infinite;
}

.hero__scroll-icon { width: 1rem; height: 1rem; }

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ============================================================
   MODULE — Statement
   ============================================================ */

.statement {
  padding-block: var(--spacing-14) var(--spacing-20);
}

.statement__text {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 3.75rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: var(--tracking-tighter);
}

.statement__highlight {
  /* Gradiente horizontal primary → accent (como el diseño) */
  background: linear-gradient(to right, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   MODULE — Services (acordeón home)
   ============================================================ */

.services {
  padding-block: var(--spacing-section-sm);
}

.services__grid {
  display: grid;
  gap: var(--spacing-8);
}

@media (min-width: 1024px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-16);
    align-items: start;
  }
}

/* Cada item del acordeón */
.service-item {
  padding: var(--spacing-5) var(--spacing-6);
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color var(--transition-base), background-color var(--transition-base);
  margin-bottom: var(--spacing-3);
}

.service-item.is-active,
.service-item:hover {
  border-color: rgba(var(--color-foreground-rgb), 0.15);
  background-color: var(--color-card);
}

.service-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
}

.service-item__title-wrap {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.service-item__marker {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-item__marker-dot {
  display: block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 2px;
  background-color: var(--color-primary);
}

.service-item__title {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
}

.service-item__chevron {
  color: var(--color-muted-fg);
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.service-item.is-active .service-item__chevron {
  transform: rotate(180deg);
}

.service-item__body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--transition-base), opacity var(--transition-base);
}

.service-item.is-active .service-item__body {
  max-height: 200px;
  opacity: 1;
}

.service-item__desc {
  font-size: var(--font-size-sm);
  color: var(--color-muted-fg);
  line-height: 1.7;
  padding: var(--spacing-2) 0 0 var(--spacing-8);
}

/* Imagen lateral de servicios */
.services__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
  .services__image-wrap { aspect-ratio: auto; min-height: 320px; }
}

.services__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   MODULE — Process
   ============================================================ */

.process {
  padding-block: var(--spacing-section-sm);
}

.process__grid {
  display: grid;
  gap: var(--spacing-gap);
}

@media (min-width: 640px)  { .process__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .process__grid { grid-template-columns: repeat(4, 1fr); } }

.process-card {
  padding: var(--spacing-6) var(--spacing-8);
  border-radius: var(--radius-2xl);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-base);
}

.process-card:hover { border-color: rgba(var(--color-primary-rgb), 0.2); }

.process-card__number {
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 6rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(var(--color-foreground-rgb), 0.1);
  display: block;
  margin-bottom: var(--spacing-4);
  transition: color var(--transition-base);
}

.process-card:hover .process-card__number {
  color: rgba(var(--color-primary-rgb), 0.2);
}

.process-card__title {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  margin-bottom: var(--spacing-2);
  transition: color var(--transition-fast);
}

.process-card:hover .process-card__title { color: var(--color-primary); }

.process-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-muted-fg);
  line-height: 1.7;
}

/* ============================================================
   MODULE — Work Grid (home)
   ============================================================ */

.work {
  padding-block: var(--spacing-section-sm);
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
}

@media (min-width: 1024px) {
  .work__grid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); }
}

.work-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  cursor: pointer;
  aspect-ratio: 4 / 3;
  background-color: var(--color-muted);
}

/* Cards altas: posiciones 1 y 4 (index 0 y 3) */
.work-card--tall {
  grid-row: span 2;
  aspect-ratio: 3 / 4;
}

.work-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}

.work-card:hover .work-card__image { transform: scale(1.05); }

.work-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.work-card:hover .work-card__overlay { opacity: 1; }

.work-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-4) var(--spacing-5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.work-card:hover .work-card__info {
  opacity: 1;
  transform: translateY(0);
}

.work-card__category {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--spacing-1);
  display: block;
}

.work-card__title {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  color: #fff;
}

@media (min-width: 768px) {
  .work-card__title { font-size: var(--font-size-body); }
}

.work__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-10);
}

.work__cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-muted-fg);
  transition: color var(--transition-fast);
}

.work__cta-link:hover { color: var(--color-foreground); }
.work__cta-link:hover .work__cta-icon { transform: translate(2px, -2px); }

.work__cta-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--transition-fast);
}

/* ─── Work page — filtros y lista ─── */
.work-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-16);
}

.work-filter {
  padding: var(--spacing-2) var(--spacing-5);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
  cursor: pointer;
}

.work-filter--active {
  background-color: var(--color-accent);
  color: var(--color-accent-fg);
}

.dark .work-filter--active {
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
}

.work-filter:not(.work-filter--active) {
  background-color: var(--color-card);
  border: 1px solid rgba(var(--color-foreground-rgb), 0.15);
  color: var(--color-muted-fg);
}

.work-filter:not(.work-filter--active):hover { color: var(--color-foreground); }

/* Lista de proyectos (page work) */
.work-list { display: flex; flex-direction: column; gap: var(--spacing-20); }

.work-project-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8);
  align-items: center;
}

@media (min-width: 768px) {
  .work-project-item { grid-template-columns: 7fr 5fr; gap: var(--spacing-12); }
  .work-project-item--reverse { grid-template-columns: 5fr 7fr; }
}

.work-project-item__image-link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  aspect-ratio: 16 / 10;
}

.work-project-item--reverse .work-project-item__image-link {
  order: 2;
}

.work-project-item--reverse .work-project-item__content {
  order: 1;
}

.work-project-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}

.work-project-item__image-link:hover .work-project-item__img {
  transform: scale(1.04);
}

.work-project-item__badge {
  position: absolute;
  top: var(--spacing-4);
  left: var(--spacing-4);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  background-color: rgba(var(--color-foreground-rgb), 0.85);
  color: var(--color-background);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  backdrop-filter: blur(8px);
}

.work-project-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}

.work-project-item__tag {
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  background-color: rgba(var(--color-primary-rgb), 0.05);
}

.work-project-item__cat {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--spacing-2);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.work-project-item__cat-line {
  display: block;
  width: 1.5rem;
  height: 1px;
  background-color: var(--color-border);
}

.work-project-item__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.1;
  margin-bottom: var(--spacing-4);
  transition: color var(--transition-fast);
}

.work-project-item__image-link:hover ~ .work-project-item__content .work-project-item__title,
.work-project-item:hover .work-project-item__title {
  color: var(--color-primary);
}

.work-project-item__desc {
  font-size: var(--font-size-sm);
  color: var(--color-muted-fg);
  line-height: 1.7;
  margin-bottom: var(--spacing-5);
  max-width: 36rem;
}

.work-project-item__result {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-full);
  background-color: rgba(var(--color-accent-rgb), 0.1);
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  margin-bottom: var(--spacing-5);
}

.work-project-item__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  transition: gap var(--transition-fast);
}

.work-project-item__link:hover { gap: var(--spacing-3); }

.work-project-item__link-icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--transition-fast);
}

.work-project-item__link:hover .work-project-item__link-icon {
  transform: translate(2px, -2px);
}

/* ============================================================
   MODULE — Pricing
   ============================================================ */

.pricing {
  padding-block: var(--spacing-section-sm);
}

.pricing__grid {
  display: grid;
  gap: var(--spacing-gap-md);
}

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

.pricing-card {
  position: relative;
  padding: var(--spacing-7) var(--spacing-8);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(var(--color-foreground-rgb), 0.15);
  background-color: rgba(var(--color-card-rgb), 0.5);
  transition: border-color var(--transition-base);
}

/* Popular: borde accent light / primary dark */
.pricing-card--popular {
  border-color: rgba(var(--color-accent-rgb), 0.3);
  background-color: var(--color-card);
}

.dark .pricing-card--popular {
  border-color: rgba(var(--color-primary-rgb), 0.3);
}

.pricing-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-6);
}

.pricing-card__name {
  font-family: var(--font-display);
  font-size: var(--font-size-body);
}

.pricing-card__badge {
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  background-color: rgba(var(--color-foreground-rgb), 0.1);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
}

.pricing-card__price { margin-bottom: var(--spacing-4); }

.pricing-card__amount {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tighter);
}

.pricing-card__period {
  font-size: var(--font-size-sm);
  color: var(--color-muted-fg);
}

.pricing-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-muted-fg);
  line-height: 1.7;
  margin-bottom: var(--spacing-6);
}

.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-8);
  flex: 1;
}

.pricing-card__feature {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: var(--font-size-sm);
}

.pricing-card__check {
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-full);
  background-color: rgba(var(--color-primary-rgb), 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}

.pricing-card__feature-text { color: var(--color-muted-fg); }

/* ============================================================
   MODULE — Testimonials
   ============================================================ */

.testimonials {
  padding-block: var(--spacing-section-sm);
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
}

@media (min-width: 1024px) {
  .testimonials__grid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); }
}

.testimonial-card {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  background-color: rgba(var(--color-card-rgb), 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.testimonial-card--video { grid-row: span 2; }

.testimonial-card__video-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  cursor: pointer;
  overflow: hidden;
}

.testimonial-card__video-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-card__play-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast);
}

.testimonial-card__video-thumb:hover .testimonial-card__play-overlay {
  background-color: rgba(0,0,0,0.45);
}

.testimonial-card__play-btn {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background-color: rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

.testimonial-card__video-thumb:hover .testimonial-card__play-btn {
  transform: scale(1.1);
}

.testimonial-card__duration {
  position: absolute;
  bottom: var(--spacing-3);
  right: var(--spacing-3);
  padding: 2px var(--spacing-2);
  border-radius: var(--radius-sm);
  background-color: rgba(0,0,0,0.6);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: #fff;
}

.testimonial-card__body {
  padding: var(--spacing-4) var(--spacing-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.testimonial-card__quote-icon {
  color: rgba(var(--color-primary-rgb), 0.3);
  margin-bottom: var(--spacing-3);
  width: 1rem;
  height: 1rem;
}

.testimonial-card__text {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-muted-fg);
  flex: 1;
  margin-bottom: var(--spacing-4);
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.testimonial-card__avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
}

.testimonial-card__name {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  display: block;
}

.testimonial-card__role {
  font-size: var(--font-size-label);
  color: rgba(var(--color-muted-fg), 0.8);
  display: block;
}

/* ============================================================
   MODULE — FAQ
   ============================================================ */

.faq {
  padding-block: var(--spacing-section-sm);
}

.faq__grid {
  display: grid;
  gap: var(--spacing-8);
}

@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-16); }
}

.faq__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
  .faq__image-wrap { aspect-ratio: auto; min-height: 400px; }
}

.faq__image { width: 100%; height: 100%; object-fit: cover; }

.faq-item {
  border-bottom: 1px solid rgba(var(--color-foreground-rgb), 0.15);
}

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding-block: var(--spacing-5) var(--spacing-6);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.faq-item__trigger:hover { color: var(--color-primary); }

.faq-item__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(var(--color-foreground-rgb), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted-fg);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.faq-item__trigger:hover .faq-item__icon,
.faq-item.is-open .faq-item__icon {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.faq-item__icon-inner { width: 0.75rem; height: 0.75rem; }

.faq-item__question {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

.faq-item__answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 300ms ease, opacity 300ms ease;
}

.faq-item.is-open .faq-item__answer {
  max-height: 400px;
  opacity: 1;
}

.faq-item__answer-text {
  padding: 0 0 var(--spacing-5) var(--spacing-10);
  font-size: var(--font-size-sm);
  color: var(--color-muted-fg);
  line-height: 1.7;
  max-width: 40rem;
}

/* ============================================================
   MODULE — CTA Final
   ============================================================ */

.cta-final {
  padding-block: var(--spacing-section-sm);
}

/* Fondo siempre oscuro (como en el diseño original bg-foreground) */
.cta-final__inner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  background-color: #141416;
  padding: clamp(3rem, 8vw, 7rem) var(--spacing-container);
  text-align: center;
}

.dark .cta-final__inner {
  background-color: #0A0A0F;
  border: 1px solid rgba(232, 232, 224, 0.06);
}

/* Glows */
.cta-final__glow-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 31rem;
  height: 31rem;
  border-radius: var(--radius-full);
  background-color: rgba(196, 229, 74, 0.1);
  filter: blur(120px);
  pointer-events: none;
}

.dark .cta-final__glow-center {
  background-color: rgba(217, 69, 21, 0.1);
}

.cta-final__glow-bottom {
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 18rem;
  height: 18rem;
  border-radius: var(--radius-full);
  background-color: rgba(126, 220, 208, 0.08);
  filter: blur(100px);
  pointer-events: none;
}

.dark .cta-final__glow-bottom {
  background-color: rgba(8, 145, 178, 0.08);
}

.cta-final__content {
  position: relative;
  z-index: 10;
}

/* Texto siempre sobre fondo oscuro */
.cta-final__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: #C4E54A;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--spacing-6);
}

.dark .cta-final__label { color: #D94515; }

.cta-final__title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 5vw, 3.75rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  color: #E8E8E0;
  margin-bottom: var(--spacing-6);
}

.cta-final__desc {
  font-size: var(--font-size-sm);
  color: rgba(232, 232, 224, 0.6);
  max-width: 32rem;
  margin-inline: auto;
  line-height: 1.7;
  margin-bottom: var(--spacing-10);
}

@media (min-width: 768px) {
  .cta-final__desc { font-size: var(--font-size-body); }
}

/* ============================================================
   MODULE — Footer
   ============================================================ */

.footer {
  border-top: 1px solid rgba(var(--color-foreground-rgb), 0.1);
  margin-top: var(--spacing-24);
}

.footer__inner {
  padding-block: var(--spacing-16) var(--spacing-20);
}

/* Jeff. gigante */
.footer__brand {
  text-align: center;
  margin-bottom: var(--spacing-14);
}

.footer__brand-name {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: var(--font-weight-bold);
  line-height: 0.85;
  letter-spacing: -0.04em;
  background: linear-gradient(
    to bottom,
    var(--color-foreground) 0%,
    rgba(var(--color-foreground-rgb), 0.6) 50%,
    rgba(var(--color-foreground-rgb), 0.2) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.footer__tagline {
  font-size: var(--font-size-sm);
  color: var(--color-muted-fg);
  margin-top: var(--spacing-4);
  max-width: 20rem;
  margin-inline: auto;
  line-height: 1.6;
}

/* Nav cards */
.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-8);
}

@media (min-width: 640px)  { .footer__nav { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .footer__nav { grid-template-columns: repeat(6, 1fr); } }

.footer__nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background-color: rgba(var(--color-card-rgb), 0.5);
  font-size: var(--font-size-sm);
  color: var(--color-muted-fg);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.footer__nav-link:hover,
.footer__nav-link--active {
  color: var(--color-foreground);
  border-color: rgba(var(--color-foreground-rgb), 0.2);
}

.footer__nav-link--active {
  border-color: rgba(var(--color-primary-rgb), 0.3);
  background-color: rgba(var(--color-primary-rgb), 0.05);
  color: var(--color-primary);
}

.footer__nav-icon {
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.footer__nav-link:hover .footer__nav-icon { opacity: 1; }

/* Contact + Social cards */
.footer__contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-14);
}

@media (min-width: 640px)  { .footer__contact { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__contact { grid-template-columns: repeat(4, 1fr); } }

.footer__contact-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background-color: rgba(var(--color-card-rgb), 0.5);
  transition: border-color var(--transition-fast);
}

.footer__contact-card:hover {
  border-color: rgba(var(--color-foreground-rgb), 0.2);
}

.footer__contact-icon-wrap {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background-color: rgba(var(--color-primary-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.footer__contact-icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-primary);
}

.footer__contact-label {
  font-size: var(--font-size-label);
  color: rgba(var(--color-muted-fg), 0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
}

.footer__contact-value {
  font-size: var(--font-size-sm);
  display: block;
}

/* Socials (grupo de 3 botones) */
.footer__socials {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.footer__social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background-color: rgba(var(--color-card-rgb), 0.5);
  font-size: var(--font-size-xs);
  color: var(--color-muted-fg);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.footer__social-btn:hover {
  color: var(--color-foreground);
  border-color: rgba(var(--color-foreground-rgb), 0.2);
}

/* Bottom bar */
.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding-top: var(--spacing-6);
  border-top: 1px solid rgba(var(--color-foreground-rgb), 0.1);
}

@media (min-width: 768px) {
  .footer__bottom { flex-direction: row; }
}

.footer__copyright {
  font-size: var(--font-size-xs);
  color: rgba(var(--color-muted-fg), 0.7);
}

.footer__legal {
  display: flex;
  gap: var(--spacing-6);
}

.footer__legal-link {
  font-size: var(--font-size-xs);
  color: rgba(var(--color-muted-fg), 0.7);
  transition: color var(--transition-fast);
}

.footer__legal-link:hover { color: var(--color-foreground); }

/* ============================================================
   MODULE — Page Header (páginas internas)
   ============================================================ */

.page-header {
  padding-top: calc(var(--header-height) + var(--spacing-16));
  padding-bottom: var(--spacing-10);
}

@media (min-width: 768px) {
  .page-header { padding-bottom: var(--spacing-16); }
}

.page-header__inner {
  display: grid;
  gap: var(--spacing-8);
  align-items: center;
  min-height: 280px;
}

@media (min-width: 1024px) {
  .page-header__inner {
    grid-template-columns: 7fr 5fr;
    gap: var(--spacing-12);
    min-height: 340px;
  }
}

.page-header__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
}

.page-header__dot {
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}

.page-header__label {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary);
}

.page-header__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  margin-bottom: var(--spacing-6);
}

.page-header__title-muted { color: var(--color-muted-fg); }
.page-header__title-dot   { color: var(--color-primary); }

.page-header__title-gradient {
  background: linear-gradient(to right, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-header__desc {
  font-size: var(--font-size-body);
  color: var(--color-muted-fg);
  max-width: 40rem;
  line-height: 1.7;
}

.page-header__image-wrap {
  display: none;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  aspect-ratio: 4 / 3;
  transform: rotate(4deg);
  box-shadow: var(--shadow-2xl);
}

@media (min-width: 1024px) {
  .page-header__image-wrap { display: block; }
}

.page-header__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-header__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
}

/* ============================================================
   MODULE — Contact
   ============================================================ */

.contact__grid {
  display: grid;
  gap: var(--spacing-12);
}

@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: 5fr 7fr; gap: var(--spacing-16); }
}

/* Calendly card — fondo siempre oscuro como en el diseño */
.contact-calendly {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background-color: #141416;
  padding: var(--spacing-7);
}

.dark .contact-calendly {
  background-color: #0A0A0F;
  border: 1px solid rgba(232, 232, 224, 0.06);
}

.contact-calendly__glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 10rem;
  height: 10rem;
  border-radius: var(--radius-full);
  background-color: rgba(196, 229, 74, 0.12);
  filter: blur(3rem);
  pointer-events: none;
}

.dark .contact-calendly__glow {
  background-color: rgba(217, 69, 21, 0.12);
}

.contact-calendly__content { position: relative; z-index: 10; }

.contact-calendly__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: #C4E54A;
  margin-bottom: var(--spacing-4);
}

.dark .contact-calendly__icon { color: #D94515; }

.contact-calendly__title {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  color: #E8E8E0;
  margin-bottom: var(--spacing-2);
}

.contact-calendly__desc {
  font-size: var(--font-size-sm);
  color: rgba(232, 232, 224, 0.5);
  margin-bottom: var(--spacing-5);
  line-height: 1.7;
}

/* Otros métodos de contacto */
.contact-methods { margin-top: var(--spacing-6); }

.contact-methods__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-muted-fg);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--spacing-3);
  display: block;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.contact-method:hover {
  background-color: rgba(var(--color-card-rgb), 0.8);
  border-color: var(--color-border);
}

.contact-method__icon-wrap {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background-color: rgba(var(--color-primary-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

.contact-method__icon { width: 1rem; height: 1rem; }

.contact-method__title {
  font-size: var(--font-size-sm);
  display: block;
}

.contact-method__value {
  font-size: var(--font-size-xs);
  color: var(--color-muted-fg);
  display: block;
}

.contact-method__arrow {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--color-muted-fg);
  opacity: 0;
  margin-left: auto;
  transition: opacity var(--transition-fast);
}

.contact-method:hover .contact-method__arrow { opacity: 1; }

/* Formulario */
.contact-form { display: flex; flex-direction: column; gap: var(--spacing-5); }

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

@media (min-width: 640px) {
  .form-row { grid-template-columns: repeat(2, 1fr); }
}

.form-field { display: flex; flex-direction: column; gap: var(--spacing-2); }

.form-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-muted-fg);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(var(--color-foreground-rgb), 0.15);
  background-color: rgba(var(--color-card-rgb), 0.5);
  color: var(--color-foreground);
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(var(--color-foreground-rgb), 0.3);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: rgba(var(--color-primary-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
  outline: none;
}

.form-textarea {
  min-height: 130px;
  resize: none;
}

.form-error {
  font-size: var(--font-size-xs);
  color: var(--color-accent);
}

.form-footer {
  font-size: var(--font-size-xs);
  color: rgba(var(--color-muted-fg), 0.6);
  text-align: center;
  padding-top: var(--spacing-1);
}

/* Success state */
.contact-success {
  padding: var(--spacing-10);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(var(--color-primary-rgb), 0.2);
  background-color: rgba(var(--color-primary-rgb), 0.05);
  text-align: center;
}

.contact-success__icon-wrap {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  background-color: rgba(var(--color-primary-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: var(--spacing-5);
  color: var(--color-primary);
}

.contact-success__icon { width: 1.75rem; height: 1.75rem; }
.contact-success__title { font-family: var(--font-display); font-size: var(--font-size-h3); margin-bottom: var(--spacing-2); }
.contact-success__desc { font-size: var(--font-size-sm); color: var(--color-muted-fg); margin-bottom: var(--spacing-6); }

/* ============================================================
   MODULE — About
   ============================================================ */

.about__hero {
  display: grid;
  gap: var(--spacing-12);
  align-items: center;
  padding-top: calc(var(--header-height) + var(--spacing-16));
  padding-bottom: var(--spacing-16);
  margin-bottom: var(--spacing-16);
}

@media (min-width: 768px) {
  .about__hero { grid-template-columns: 7fr 5fr; gap: var(--spacing-16); }
}

.about__photo-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  aspect-ratio: 4 / 5;
  transform: rotate(3deg);
  box-shadow: var(--shadow-2xl);
}

.about__photo { width: 100%; height: 100%; object-fit: cover; }

.about__photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--color-background-rgb), 0.3), transparent 60%);
}

.about__location-card {
  position: absolute;
  bottom: -1.25rem;
  left: -1.25rem;
  padding: var(--spacing-4);
  border-radius: var(--radius-xl);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-2xl);
}

@media (min-width: 768px) {
  .about__location-card { left: -2.5rem; }
}

.about__location-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: rgba(var(--color-muted-fg), 0.7);
  display: block;
  margin-bottom: 2px;
}

.about__location-value {
  font-family: var(--font-display);
  font-size: var(--font-size-body);
  display: block;
}

/* Cards reutilizables (timeline, empresa, skills, etc.) */
.card {
  padding: var(--spacing-6) var(--spacing-8);
  border-radius: var(--radius-2xl);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-base);
}

.card--transparent {
  background-color: rgba(var(--color-card-rgb), 0.5);
}

.card:hover { border-color: rgba(var(--color-primary-rgb), 0.2); }

/* ============================================================
   MODULE — Insights / Blog
   ============================================================ */

.insights__featured {
  padding: var(--spacing-7) var(--spacing-10);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(var(--color-foreground-rgb), 0.15);
  background-color: rgba(var(--color-card-rgb), 0.5);
  cursor: pointer;
  margin-bottom: var(--spacing-16);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.insights__featured:hover {
  background-color: var(--color-card);
  border-color: rgba(var(--color-primary-rgb), 0.2);
}

.insights__featured-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-5);
}

.insights__featured-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-8);
}

.insights__featured-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tighter);
  margin-bottom: var(--spacing-3);
  transition: color var(--transition-fast);
}

.insights__featured:hover .insights__featured-title {
  color: var(--color-primary);
}

.insights__featured-excerpt {
  color: var(--color-muted-fg);
  line-height: 1.7;
  max-width: 40rem;
}

.insights__featured-arrow {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  color: var(--color-muted-fg);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.insights__featured:hover .insights__featured-arrow {
  opacity: 1;
  transform: translateX(0);
}

.insights__grid {
  display: grid;
  gap: var(--spacing-gap);
}

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

.post-card {
  padding: var(--spacing-6);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(var(--color-foreground-rgb), 0.15);
  background-color: rgba(var(--color-card-rgb), 0.5);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);
  display: flex;
  flex-direction: column;
}

.post-card:hover {
  background-color: var(--color-card);
  border-color: rgba(var(--color-primary-rgb), 0.2);
}

.post-card__cat-wrap { margin-bottom: var(--spacing-4); }

.post-card__cat {
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  background-color: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.post-card__title {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  margin-bottom: var(--spacing-2);
  transition: color var(--transition-fast);
}

.post-card:hover .post-card__title { color: var(--color-primary); }

.post-card__excerpt {
  font-size: var(--font-size-sm);
  color: var(--color-muted-fg);
  line-height: 1.7;
  margin-bottom: var(--spacing-5);
  flex: 1;
}

.post-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-muted-fg);
}

.post-card__read-time { font-family: var(--font-mono); }

/* ============================================================
   MODULE — Project Detail
   ============================================================ */

.project-detail__hero {
  padding-top: calc(var(--header-height) + var(--spacing-16));
  padding-bottom: var(--spacing-12);
}

.project-detail__hero-img {
  width: 100%;
  height: clamp(16rem, 40vw, 36rem);
  object-fit: cover;
  border-radius: var(--radius-2xl);
}

.project-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4) var(--spacing-8);
  padding: var(--spacing-8) 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-12);
}

.project-detail__meta-item {}

.project-detail__meta-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-muted-fg);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  display: block;
  margin-bottom: 2px;
}

.project-detail__meta-value {
  font-family: var(--font-display);
  font-size: var(--font-size-body);
  display: block;
}

/* ============================================================
   MODULE — Servicios (página completa)
   ============================================================ */

.services-page__grid {
  display: grid;
  gap: var(--spacing-gap-md);
  margin-bottom: var(--spacing-32);
}

@media (min-width: 768px) {
  .services-page__grid { grid-template-columns: repeat(3, 1fr); }
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-7) var(--spacing-8);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(var(--color-foreground-rgb), 0.15);
  background-color: rgba(var(--color-card-rgb), 0.5);
  transition: border-color var(--transition-slow), background-color var(--transition-slow);
}

.service-card:hover {
  background-color: var(--color-card);
  border-color: var(--color-border);
}

.service-card--popular {
  border-color: rgba(var(--color-accent-rgb), 0.3);
  background-color: var(--color-card);
}

.dark .service-card--popular {
  border-color: rgba(var(--color-primary-rgb), 0.3);
}

.service-card__popular-badge {
  position: absolute;
  top: -0.75rem;
  left: var(--spacing-7);
  padding: var(--spacing-1) var(--spacing-4);
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  color: var(--color-accent-fg);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .service-card__popular-badge {
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
}

.service-card__icon-wrap {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background-color: rgba(var(--color-primary-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: var(--spacing-6);
}

.service-card__icon { width: 1.375rem; height: 1.375rem; }

.service-card__header { margin-bottom: var(--spacing-8); }

.service-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: var(--spacing-2);
}

.service-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-muted-fg);
  line-height: 1.6;
}

.service-card__pricing { margin-bottom: var(--spacing-8); }

.service-card__price {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tighter);
}

.service-card__timeline {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-muted-fg);
  margin-top: 2px;
  display: block;
}

.service-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-10);
  flex: 1;
}

.service-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  font-size: var(--font-size-sm);
}

.service-card__check {
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-full);
  background-color: rgba(var(--color-primary-rgb), 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-primary);
}

.service-card__check-icon { width: 0.625rem; height: 0.625rem; }
.service-card__feature-text { color: var(--color-muted-fg); }

/* Add-ons */
.addons__header { text-align: center; margin-bottom: var(--spacing-12); }

.addons__heading-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.addons__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tighter);
}

.addons__grid {
  display: grid;
  gap: var(--spacing-4);
}

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

.addon-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: var(--spacing-5);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(var(--color-foreground-rgb), 0.15);
  background-color: rgba(var(--color-card-rgb), 0.5);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.addon-card:hover {
  background-color: var(--color-card);
  border-color: rgba(var(--color-primary-rgb), 0.2);
}

.addon-card__title {
  font-family: var(--font-display);
  font-size: var(--font-size-body);
  margin-bottom: var(--spacing-1);
}

.addon-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-muted-fg);
}

.addon-card__badge {
  flex-shrink: 0;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  background-color: var(--color-secondary);
  color: var(--color-muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================
   STATE — Animaciones y estados JS
   ============================================================ */

/* Fade-in con Intersection Observer */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay para grupos */
.fade-in:nth-child(1) { transition-delay: 0ms; }
.fade-in:nth-child(2) { transition-delay: 80ms; }
.fade-in:nth-child(3) { transition-delay: 160ms; }
.fade-in:nth-child(4) { transition-delay: 240ms; }
.fade-in:nth-child(5) { transition-delay: 320ms; }
.fade-in:nth-child(6) { transition-delay: 400ms; }
.fade-in:nth-child(7) { transition-delay: 480ms; }
.fade-in:nth-child(8) { transition-delay: 560ms; }

/* Work project items — ocultos mientras se filtran */
.work-project-item.is-hidden {
  display: none;
}

/* Spinner para el formulario */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.spin { animation: spin 1s linear infinite; }

/* ============================================================
   THEME — Utilidades
   ============================================================ */

.u-text-gradient {
  background: linear-gradient(to right, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.u-text-gradient-vertical {
  background: linear-gradient(
    to bottom,
    var(--color-foreground) 0%,
    rgba(var(--color-foreground-rgb), 0.6) 50%,
    rgba(var(--color-foreground-rgb), 0.2) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-background); }
::-webkit-scrollbar-thumb {
  background-color: rgba(var(--color-foreground-rgb), 0.15);
  border-radius: var(--radius-full);
}