/* Publicidad Digital — page-specific styles. Extends styles.css and redes-sociales.css */

/* SR-only fallback (in case redes-sociales.css isn't loaded) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============ SERVICIOS — extra tag inside the card ============ */
.pd-card-tag {
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(6,13,30,0.45);
}

/* ============ POR QUÉ — 2x2 reason grid ============ */
.pd-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(6,13,30,0.12);
  border-left: 1px solid rgba(6,13,30,0.12);
}
.pd-why-card {
  position: relative;
  padding: 48px 40px 44px;
  border-right: 1px solid rgba(6,13,30,0.12);
  border-bottom: 1px solid rgba(6,13,30,0.12);
  background: transparent;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: background .35s ease, transform .35s ease;
  overflow: hidden;
}
.pd-why-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 3px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.6,0,.2,1);
}
.pd-why-card:hover {
  background: var(--white);
  z-index: 2;
}
.pd-why-card:hover::before { transform: scaleX(1); }

.pd-why-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(6,13,30,0.4);
}
.pd-why-name {
  font-weight: 900;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--navy);
}
.pd-why-body {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(6,13,30,0.68);
  max-width: 460px;
}

@media (max-width: 800px) {
  .pd-why-grid { grid-template-columns: 1fr; }
  .pd-why-card { min-height: auto; padding: 36px 28px 36px; }
}

/* ============ CONTACTO (navy variant — overrides rs-contact-* which assumed cream) ============ */
.pd-contact {
  /* navy bg already covered by .bg-navy */
}
.pd-contact-title { color: var(--white); }
.pd-contact-sub { color: rgba(255,255,255,0.55); }
.pd-contact-extras { color: rgba(255,255,255,0.6); }
.pd-contact-extras a {
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,0.25);
}
.pd-contact-extras a:hover {
  color: var(--lime);
  border-color: var(--lime);
}

/* Contact form on dark bg — adjust input look */
.pd-contact .contact-form .field label {
  color: rgba(255,255,255,0.55);
}
.pd-contact .contact-form .field input,
.pd-contact .contact-form .field textarea {
  color: var(--white);
  border-bottom-color: rgba(255,255,255,0.2);
  background: transparent;
}
.pd-contact .contact-form .field input:focus,
.pd-contact .contact-form .field textarea:focus {
  border-bottom-color: var(--lime);
}
.pd-contact .contact-form .btn-send {
  background: var(--lime);
  color: var(--navy);
  border-color: var(--lime);
}
.pd-contact .contact-form .btn-send:hover {
  background: transparent;
  color: var(--lime);
}