/* =============================================================================
   paginas-web.css — Hub /diseno-de-paginas-web/ y sus 4 páginas de servicio
   Usa los tokens de styles.css (DS v1.1). Prefijo .pw-
   ============================================================================= */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.pw-hero {
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    var(--navy);
  background-size: 88px 88px, 88px 88px, auto;
  padding: calc(var(--nav-h) + 3.5rem) 0 5rem;
  color: var(--white);
}
.pw-hero .eyebrow { color: var(--cyan); }
.pw-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3.5rem; align-items: center; }
.pw-crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.875rem; color: var(--text-on-dark-muted); margin-bottom: 1.75rem; }
.pw-crumbs a { color: var(--text-on-dark-muted); }
.pw-crumbs a:hover { color: var(--white); }
.pw-crumbs span:last-child { color: var(--white); }
.pw-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0.75rem 0 1.5rem;
  text-wrap: balance;
}
.pw-h1 em { font-style: normal; color: var(--cyan); }
.pw-lead { font-size: 1.25rem; line-height: 1.75; color: rgba(255, 255, 255, 0.82); max-width: 44rem; text-wrap: pretty; }
.pw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2.25rem; }
.pw-link { font-weight: 600; color: var(--petrol); }
.pw-hero .pw-link, .pw-section--navy .pw-link { color: var(--cyan); }
.pw-link:hover { text-decoration: underline; }
.pw-hero-media {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--navy-mid);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 8, 24, 0.45);
}
.pw-hero-media img, .pw-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-hero-media video { opacity: 0; transition: opacity 400ms ease-out; }
.pw-hero-media video.is-playing { opacity: 1; }

/* ── Secciones ────────────────────────────────────────────────────────────── */
.pw-section { padding: 5.5rem 0; background: var(--white); }
.pw-section--tint { background: var(--gray-bg); }
.pw-section--navy { background: var(--navy); color: var(--white); }
.pw-section .section-title { margin: 0.5rem 0 2.5rem; max-width: 46rem; }
.pw-p { font-size: 1.1875rem; line-height: 1.75; color: var(--text-mid); max-width: 34rem; }
.pw-p--light { color: rgba(255, 255, 255, 0.78); }
.pw-note { margin-top: 1.75rem; font-size: 1.0625rem; color: var(--text-mid); }
.pw-note a { color: var(--petrol); font-weight: 600; }
.pw-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: start; }
.pw-split .section-title { margin-bottom: 1.25rem; }
.pw-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2.5rem; }
.pw-head-row .section-title { margin-bottom: 0; }
.pw-num { font-size: 0.875rem; font-weight: 700; letter-spacing: 3px; color: var(--petrol); }

/* ── Tipos (hub) ──────────────────────────────────────────────────────────── */
.pw-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.pw-type {
  display: grid; grid-template-columns: 1fr; background: var(--white); border: 1px solid var(--gray-border);
  border-radius: var(--radius); overflow: hidden; color: inherit; transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
.pw-type:hover { border-color: var(--petrol); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(4, 30, 65, 0.12); }
.pw-type-media { display: block; aspect-ratio: 16 / 9; background: var(--navy); }
.pw-type-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-type-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.75rem 1.75rem 1.5rem; }
.pw-type-name { font-family: var(--font-display); font-size: 1.625rem; font-weight: 600; color: var(--text-dark); }
.pw-type-desc { font-size: 1.125rem; line-height: 1.65; color: var(--text-mid); }
.pw-type-meta { font-size: 0.9375rem; color: var(--text-muted); }
.pw-more { margin-top: 0.5rem; font-weight: 600; color: var(--petrol); }

/* ── Tabla comparativa ────────────────────────────────────────────────────── */
.pw-table-wrap { overflow-x: auto; border: 1px solid var(--gray-border); border-radius: var(--radius); background: var(--white); }
.pw-table { width: 100%; border-collapse: collapse; font-size: 1.0625rem; min-width: 760px; }
.pw-table th, .pw-table td { text-align: left; padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--gray-border); vertical-align: top; }
.pw-table thead th { font-size: 0.8125rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); background: var(--gray-bg); }
.pw-table tbody tr:last-child > * { border-bottom: 0; }
.pw-table tbody th a { color: var(--petrol); font-weight: 700; }
.pw-table td { color: var(--text-mid); }

/* ── Listas ───────────────────────────────────────────────────────────────── */
.pw-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.125rem; }
.pw-checks li {
  position: relative; padding: 1.125rem 1.25rem 1.125rem 3.25rem; background: var(--gray-bg); border-radius: var(--radius-sm);
  font-size: 1.125rem; line-height: 1.6; color: var(--text-mid);
}
.pw-checks li::before {
  content: ''; position: absolute; left: 1.25rem; top: 1.4rem; width: 1rem; height: 0.55rem;
  border-left: 2px solid var(--petrol); border-bottom: 2px solid var(--petrol); transform: rotate(-45deg);
}
.pw-checks strong { color: var(--text-dark); }
.pw-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.pw-feature { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.75rem; background: var(--white); border: 1px solid var(--gray-border); border-radius: var(--radius); }
.pw-feature strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--text-dark); }
.pw-feature span { font-size: 1.0625rem; line-height: 1.65; color: var(--text-mid); }
.pw-tech { margin-top: 2rem; font-size: 1.0625rem; color: var(--text-mid); }
.pw-tech span { font-weight: 700; color: var(--text-dark); margin-right: 0.25rem; }

/* ── Pasos ────────────────────────────────────────────────────────────────── */
.pw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; counter-reset: none; }
.pw-steps li { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.25rem; border-top: 2px solid rgba(82, 190, 210, 0.35); }
.pw-steps strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.pw-steps span:not(.pw-step-n) { font-size: 1.0625rem; line-height: 1.6; color: rgba(255, 255, 255, 0.75); }
.pw-step-n { font-family: var(--font-display); font-size: 2.25rem; color: rgba(255, 255, 255, 0.28); line-height: 1; }
.pw-steps--compact { grid-template-columns: repeat(2, 1fr); }

/* ── Por qué / relacionados ───────────────────────────────────────────────── */
.pw-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.pw-why div { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.75rem; background: var(--white); border-radius: var(--radius); border: 1px solid var(--gray-border); }
.pw-why strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--text-dark); }
.pw-why span { font-size: 1.0625rem; line-height: 1.6; color: var(--text-mid); }
.pw-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.pw-related a { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.75rem; border: 1px solid var(--gray-border); border-radius: var(--radius); color: inherit; transition: border-color 200ms, transform 200ms; }
.pw-related a:hover { border-color: var(--petrol); transform: translateY(-3px); }
.pw-related strong { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; color: var(--text-dark); }
.pw-related span:last-child { font-size: 1.0625rem; line-height: 1.6; color: var(--text-mid); }

/* ── Caso real ────────────────────────────────────────────────────────────── */
.pw-case-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: center; }
.pw-case-media { border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--gray-border), 0 20px 50px rgba(4, 30, 65, 0.12); }
.pw-case-media img { width: 100%; height: auto; display: block; }
.pw-case { color: inherit; }

/* ── CTA final ────────────────────────────────────────────────────────────── */
.pw-cta { padding: 5.5rem 0; background: var(--navy-mid); text-align: center; color: var(--white); }
.pw-cta .section-title { margin: 0 auto 1rem; }
.pw-cta p { font-size: 1.1875rem; color: rgba(255, 255, 255, 0.78); margin-bottom: 2rem; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pw-why, .pw-steps { grid-template-columns: repeat(2, 1fr); }
  .pw-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .pw-hero-grid, .pw-split, .pw-case-row, .pw-types, .pw-related, .pw-features, .pw-why, .pw-steps, .pw-steps--compact { grid-template-columns: 1fr; }
  .pw-hero-grid, .pw-split, .pw-case-row { gap: 2rem; }
  .pw-head-row { flex-direction: column; align-items: flex-start; }
  .pw-section, .pw-cta { padding: 4rem 0; }
}

/* ── Otros servicios ──────────────────────────────────────────────────────── */
.os-icon { width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--petrol); stroke-width: 1.5; stroke-linecap: butt; stroke-linejoin: miter; margin-bottom: 0.5rem; }
.os-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) { .os-grid { grid-template-columns: 1fr; } }