:root {
  --pc-navy: #07172e;
  --pc-blue: #0b5ed7;
  --pc-blue-2: #0f3f8f;
  --pc-cyan: #10c5e8;
  --pc-ink: #172033;
  --pc-muted: #617089;
  --pc-soft: #f4f8fb;
  --pc-line: #dce6ef;
  --pc-white: #ffffff;
  --pc-shadow: 0 20px 45px rgba(7, 23, 46, 0.12);
}

/* Proyecto Graphics: conservar el sistema visual y la retícula de la copia. */
.graphics-services { position: relative; background: #0d152b; color: #fff; overflow: hidden; }
.graphics-services::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 100% 0, #33477d70, transparent 55%), radial-gradient(ellipse at 0 100%, #10c5e810, transparent 50%); }
.graphics-services > .container { position: relative; }
.services-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2.75rem; }
.services-eyebrow { display: inline-flex; align-items: center; gap: .75rem; margin-bottom: 1.4rem; color: #c6d0ea; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.services-ink-dots { display: inline-flex; gap: .3rem; }
.services-ink-dots i { width: .6rem; height: .6rem; border-radius: 50%; background: #10c5e8; }
.services-ink-dots i:nth-child(2) { background: #f06da9; }
.services-ink-dots i:nth-child(3) { background: #ffda55; }
.services-heading h2 { margin: 0 0 1.1rem; font-size: clamp(2.15rem, 4.8vw, 4rem); font-weight: 800; line-height: 1.06; letter-spacing: -.045em; }
.services-heading h2 em { color: #10c5e8; font-style: normal; }
.services-heading-dot { color: #f06da9; }
.services-heading p { max-width: 32rem; margin-bottom: 0; color: #c6d0ea; line-height: 1.7; }
.services-quote { display: inline-flex; align-items: center; gap: 1.5rem; flex-shrink: 0; padding: .85rem 0; border-bottom: 1px solid #10c5e8; color: #fff; font-weight: 600; text-decoration: none; }
.services-quote span { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #10c5e8; color: #07172e; font-size: 1.5rem; }
.services-quote:hover { color: #10c5e8; }
.services-creative-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; }
.service-creative { --service-accent: #10c5e8; }
.service-accent-yellow { --service-accent: #ffda55; }
.service-accent-pink { --service-accent: #f06da9; }
.graphics-services .service-creative { display: flex; flex-direction: column; padding: 0; overflow: hidden; background: #17213a; border: 1px solid #ffffff1c; border-radius: 1rem; box-shadow: none; }
.graphics-services .service-creative:hover, .graphics-services .service-creative:focus-within { border-color: var(--service-accent); transform: translateY(-4px); box-shadow: 0 16px 36px #0003; }
.service-photo { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #33477d; border-bottom: 3px solid var(--service-accent); }
.service-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,#07172e30,transparent 45%,#07172ec9); }
.service-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.service-creative:hover .service-photo img { transform: scale(1.035); }
.service-number { position: absolute; z-index: 1; top: .75rem; left: 1rem; color: #fff; font-size: 3.2rem; font-weight: 800; line-height: 1; letter-spacing: -.07em; text-shadow: 0 2px 12px #0008; }
.service-photo-label { position: absolute; z-index: 1; bottom: 1rem; left: 1.1rem; right: 4.5rem; color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .03em; }
.service-creative-icon { position: absolute; z-index: 1; right: 1rem; bottom: .75rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; color: #0d152b; background: var(--service-accent); border-radius: .65rem; font-size: 1.25rem; transform: rotate(-7deg); }
.service-creative-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.graphics-services .service-creative h3 { color: #fff; font-size: 1.4rem; line-height: 1.2; letter-spacing: -.025em; margin-bottom: .8rem; }
.graphics-services .service-creative p { color: #c6d0ea; font-size: .88rem; line-height: 1.8; margin-bottom: 1.3rem; }
.graphics-services .service-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: auto 0 0; }
.graphics-services .service-links li { max-width: 100%; }
.graphics-services .service-links a { align-items: center; gap: .65rem; padding: .45rem .65rem; border: 1px solid #ffffff30; border-radius: .4rem; color: #fff; font-size: .76rem; line-height: 1.4; text-decoration: none; transition: background .18s ease, color .18s ease; }
.graphics-services .service-links a span { color: var(--service-accent); }
.graphics-services .service-links a:hover { background: var(--service-accent); color: #07172e; border-color: var(--service-accent); }
.graphics-services .service-links a:hover span { color: #07172e; }
.services-signoff { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid #ffffff24; color: #c6d0ea; font-size: .78rem; }
.services-signoff i { margin-left: .5rem; color: #10c5e8; }
@media (max-width:991.98px) { .services-creative-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .services-heading { align-items: flex-start; flex-direction: column; gap: 1rem; } }
@media (max-width:575.98px) { .services-creative-grid { grid-template-columns: minmax(0,1fr); gap: 1.25rem; } .service-creative-body { padding: 1.25rem; } .services-signoff { flex-direction: column; } .services-eyebrow { font-size: .68rem; letter-spacing: .04em; } }
.page-hero.graphics-page { background: linear-gradient(135deg, var(--pc-navy), #11375b); }
.graphics-art { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid #ffffff30; border-radius: 1.5rem; background: linear-gradient(140deg,#11375b,#07172e); transform: rotate(-2deg); box-shadow: var(--pc-shadow); }
.graphics-art strong { display: block; margin: 1.75rem 0; color: #fff; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.03; letter-spacing: -.06em; }
.graphics-art strong span { color: var(--pc-cyan); }
.art-caption { font-size: .7rem; letter-spacing: .12em; color: #cbe0ed; }
.art-swatches { display: flex; gap: .65rem; margin-bottom: 2rem; }
.art-swatches span { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; color: #07172e; background: #10c5e8; font-weight: 800; }
.art-swatches span:nth-child(2) { background: #f06da9; }
.art-swatches span:nth-child(3) { background: #ffda55; }
.art-swatches span:nth-child(4) { color: #fff; background: #24344d; border: 1px solid #ffffff40; }
.service-links { list-style: none; padding: 0; margin-top: 1rem; }
.service-links a { display: flex; justify-content: space-between; padding: .45rem 0; color: var(--pc-blue); text-underline-offset: .2em; }
.industry-list, .sector-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; padding: 0; list-style: none; }
.industry-list li, .sector-grid li { padding: 1rem; background: #fff; border: 1px solid var(--pc-line); border-radius: .75rem; }
.industry-list i { color: var(--pc-blue); }
.process-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1.25rem; list-style: none; padding: 0; }
.process-grid span { color: var(--pc-blue); font-size: 2.25rem; font-weight: 800; }
.process-grid h3 { font-size: 1rem; margin-top: .75rem; }
.portfolio-filters, .related-links { display: flex; gap: .65rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.portfolio-card { overflow: hidden; background: #fff; border: 1px solid var(--pc-line); border-radius: 1rem; }
.portfolio-card img { width: 100%; aspect-ratio: 1/1; object-fit: contain; }
.portfolio-card figcaption { padding: 1rem; font-weight: 600; }
.portfolio-empty { padding: 1.5rem; border: 1px solid var(--pc-line); border-radius: .75rem; background: #fff; }
.faq-item { padding: 1.25rem; background: #fff; border: 1px solid var(--pc-line); border-radius: .75rem; margin-bottom: .75rem; }
.faq-item summary { cursor: pointer; font-weight: 700; }
.faq-item p { margin: 1rem 0 0; }
.landing-form .form-help, .landing-form small { color: #46576b; }
.landing-form .form-note { margin-top: 1rem; }
[hidden] { display: none !important; }
.reveal { opacity: 1 !important; transform: none !important; }
@media (min-width:1200px) { .navbar .nav-link { font-size: .84rem; padding-inline: .55rem; } .navbar .site-logo { width: 12rem; } .navbar .btn { font-size: .85rem; white-space: nowrap; } }
@media (max-width:1199.98px) { .navbar .btn { margin-top: .75rem; width: 100%; } }
@media (max-width:767.98px) { .process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .graphics-art { transform: none; margin-top: 1rem; } .industry-list,.sector-grid { gap: .65rem; } .industry-list li,.sector-grid li { padding: .8rem; } }
@media (max-width:359.98px) { .industry-list,.sector-grid { grid-template-columns: 1fr; } }

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--pc-ink);
  background: var(--pc-white);
  overflow-x: hidden;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 2000;
  padding: 0.75rem 1rem;
  color: var(--pc-white);
  background: var(--pc-navy);
  border-radius: 0.35rem;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}

.navbar {
  border-bottom: 1px solid rgba(220, 230, 239, 0.86);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
}

.navbar-brand {
  color: var(--pc-navy);
  font-size: 1.05rem;
  letter-spacing: 0;
}

.site-logo {
  display: block;
  width: clamp(10.5rem, 45vw, 15.5rem);
  height: auto;
  object-fit: contain;
}

.footer-logo {
  display: block;
  width: min(15.5rem, 100%);
  height: auto;
  filter: brightness(0) invert(1);
}

.brand-mark {
  display: inline-grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  color: var(--pc-white);
  background: linear-gradient(135deg, var(--pc-blue), var(--pc-cyan));
  border-radius: 0.5rem;
}

.nav-link {
  color: #24344d;
  font-weight: 600;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
  color: var(--pc-blue);
}

.dropdown-menu {
  border: 1px solid var(--pc-line);
  border-radius: 0.5rem;
  box-shadow: var(--pc-shadow);
}

.navbar .dropdown-menu {
  max-height: min(70vh, 32rem);
  overflow-y: auto;
}

.btn {
  border-radius: 0.45rem;
  font-weight: 700;
}

.btn-primary {
  background: var(--pc-blue);
  border-color: var(--pc-blue);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--pc-blue-2);
  border-color: var(--pc-blue-2);
}

.btn-outline-primary {
  color: var(--pc-blue);
  border-color: var(--pc-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--pc-blue);
  border-color: var(--pc-blue);
}

.btn-cyan {
  color: var(--pc-navy);
  background: var(--pc-cyan);
  border-color: var(--pc-cyan);
}

.btn-cyan:hover,
.btn-cyan:focus {
  color: var(--pc-navy);
  background: #72e3f4;
  border-color: #72e3f4;
}

.hero {
  position: relative;
  min-height: min(760px, calc(100vh - 72px));
  padding: 6.5rem 0 5rem;
  color: var(--pc-white);
  background:
    linear-gradient(90deg, rgba(7, 23, 46, 0.96) 0%, rgba(7, 23, 46, 0.78) 46%, rgba(7, 23, 46, 0.28) 100%),
    var(--hero-image, url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1800&q=80")) center / cover;
}

.landing-hero {
  position: relative;
  padding: 4.4rem 0 3rem;
  color: var(--pc-white);
  background:
    radial-gradient(circle at 90% 20%, rgba(16, 197, 232, 0.14), transparent 25rem),
    linear-gradient(135deg, #061326 0%, #08234d 56%, #0b5ed7 130%);
}

.landing-hero h1 {
  max-width: 690px;
  margin-bottom: 1.1rem;
  font-size: clamp(2.25rem, 10.5vw, 4.05rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: 0;
}

.landing-hero p {
  max-width: 690px;
  color: #d7e7f4;
  font-size: 1.05rem;
  line-height: 1.72;
}

.hero-visual {
  position: relative;
  margin-top: 1.4rem;
}

.hero-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.5rem;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
}

.trust-strip {
  padding: 0.85rem 0;
  background: var(--pc-white);
  border-bottom: 1px solid var(--pc-line);
}

.trust-grid {
  display: grid;
  gap: 0.7rem;
}

.trust-grid div {
  padding: 0.8rem 0;
}

.trust-grid strong,
.trust-grid span {
  display: block;
}

.trust-grid strong {
  color: var(--pc-navy);
  font-size: 1rem;
}

.trust-grid span {
  color: var(--pc-muted);
  font-size: 0.9rem;
}

.quick-contact-grid a,
.quick-contact-grid span,
.contact-stack a,
.contact-stack span {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  color: var(--pc-ink);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.35;
}

.contact-stack i {
  flex: 0 0 auto;
  color: var(--pc-blue);
}

.hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 80px;
  pointer-events: none;
  content: "";
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--pc-white));
}

.hero .container {
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 1.15rem;
  color: #b8f5ff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1,
.page-hero h1 {
  max-width: 850px;
  margin-bottom: 1.3rem;
  font-size: clamp(2.35rem, 4.8vw, 4.85rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: 0;
}

.hero p,
.page-hero p {
  max-width: 760px;
  color: #d7e7f4;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.hero-strip {
  position: relative;
  z-index: 2;
  margin-top: -3.4rem;
}

.trust-panel {
  padding: 1.4rem;
  background: var(--pc-white);
  border: 1px solid var(--pc-line);
  border-radius: 0.5rem;
  box-shadow: var(--pc-shadow);
}

.section {
  padding: 3.6rem 0;
}

.section-soft {
  background: var(--pc-soft);
}

.section-dark {
  color: var(--pc-white);
  background: var(--pc-navy);
}

.section-title {
  max-width: 780px;
  margin-bottom: 2.4rem;
}

.section-title span {
  display: inline-block;
  margin-bottom: 0.65rem;
  color: var(--pc-blue);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-dark .section-title span {
  color: var(--pc-cyan);
}

.section-title h2 {
  margin-bottom: 0.8rem;
  color: var(--pc-navy);
  font-size: clamp(1.85rem, 3vw, 2.75rem);
  font-weight: 800;
  letter-spacing: 0;
}

.section-dark .section-title h2,
.section-dark .section-title p {
  color: var(--pc-white);
}

.section-title p,
.lead-muted {
  color: var(--pc-muted);
  line-height: 1.75;
}

.service-card,
.feature-card,
.brand-card,
.contact-card,
.related-card {
  height: 100%;
  padding: 1.45rem;
  background: var(--pc-white);
  border: 1px solid var(--pc-line);
  border-radius: 0.5rem;
  box-shadow: 0 10px 28px rgba(7, 23, 46, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.service-card:hover,
.feature-card:hover,
.brand-card:hover,
.related-card:hover {
  border-color: rgba(16, 197, 232, 0.55);
  box-shadow: var(--pc-shadow);
  transform: translateY(-4px);
}

.icon-box {
  display: inline-grid;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  place-items: center;
  color: var(--pc-blue);
  background: #eaf6ff;
  border-radius: 0.5rem;
  font-size: 1.35rem;
}

.service-card h3,
.feature-card h3,
.brand-card h3,
.related-card h3 {
  color: var(--pc-navy);
  font-size: 1.08rem;
  font-weight: 800;
}

.service-card p,
.feature-card p,
.brand-card p,
.related-card p {
  color: var(--pc-muted);
  line-height: 1.65;
}

.link-arrow {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  color: var(--pc-blue);
  font-weight: 800;
  text-decoration: none;
}

.link-arrow:hover,
.link-arrow:focus {
  color: var(--pc-blue-2);
}

.page-hero {
  padding: 6.25rem 0 4.5rem;
  color: var(--pc-white);
  background:
    linear-gradient(90deg, rgba(7, 23, 46, 0.95), rgba(7, 23, 46, 0.72), rgba(7, 23, 46, 0.38)),
    var(--hero-image, url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1800&q=80")) center / cover;
}

.breadcrumb {
  margin-bottom: 1.4rem;
}

.breadcrumb a,
.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
  color: #d7e7f4;
}

.content-list {
  display: grid;
  gap: 0.7rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.content-list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  color: #37455c;
}

.content-list i {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--pc-blue);
}

.image-panel {
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: var(--pc-shadow);
}

.image-panel img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cta-band {
  padding: 2rem;
  color: var(--pc-white);
  background: linear-gradient(135deg, var(--pc-navy), var(--pc-blue-2));
  border-radius: 0.5rem;
}

.cta-band p {
  color: #d7e7f4;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.landing-card {
  min-height: 14rem;
}

.service-summary {
  display: block;
  min-height: 15rem;
  color: inherit;
  text-decoration: none;
}

.service-summary p {
  margin-bottom: 0;
}

.service-index {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
}

.service-index a {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  min-height: 4.25rem;
  padding: 0.95rem 1rem;
  color: var(--pc-ink);
  font-weight: 800;
  text-decoration: none;
  background: var(--pc-white);
  border: 1px solid var(--pc-line);
  border-radius: 0.5rem;
  box-shadow: 0 10px 28px rgba(7, 23, 46, 0.06);
}

.service-index a:hover,
.service-index a:focus {
  color: var(--pc-blue);
  border-color: rgba(16, 197, 232, 0.55);
  box-shadow: var(--pc-shadow);
}

.service-index i {
  display: inline-grid;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  color: var(--pc-blue);
  background: #eaf6ff;
  border-radius: 0.5rem;
}

.need-card {
  display: block;
  height: 100%;
  min-height: 13rem;
  padding: 1.35rem;
  color: var(--pc-ink);
  text-decoration: none;
  background: var(--pc-white);
  border: 1px solid var(--pc-line);
  border-radius: 0.5rem;
  box-shadow: 0 10px 28px rgba(7, 23, 46, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.need-card:hover,
.need-card:focus {
  color: var(--pc-ink);
  border-color: rgba(16, 197, 232, 0.55);
  box-shadow: var(--pc-shadow);
  transform: translateY(-4px);
}

.need-card i {
  display: inline-grid;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  place-items: center;
  color: var(--pc-blue);
  background: #eaf6ff;
  border-radius: 0.5rem;
  font-size: 1.35rem;
}

.need-card h3 {
  color: var(--pc-navy);
  font-size: 1.05rem;
  font-weight: 800;
}

.need-card p {
  margin-bottom: 0;
  color: var(--pc-muted);
  line-height: 1.65;
}

.logo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.logo-card {
  display: grid;
  min-height: 7.2rem;
  padding: 1.25rem;
  place-items: center;
  background: var(--pc-white);
  border: 1px solid var(--pc-line);
  border-radius: 0.5rem;
  box-shadow: 0 10px 28px rgba(7, 23, 46, 0.06);
}

.logo-card img {
  width: 100%;
  max-width: 12rem;
  max-height: 4.4rem;
  object-fit: contain;
}

.contact-stack {
  display: grid;
  gap: 0.9rem;
}

.contact-stack strong {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.section-dark .contact-stack a,
.section-dark .contact-stack span {
  color: var(--pc-white);
}

.section-dark .contact-stack i {
  color: var(--pc-cyan);
}

.operation-panel {
  padding: 1.45rem;
  background: var(--pc-white);
  border: 1px solid var(--pc-line);
  border-radius: 0.5rem;
  box-shadow: 0 10px 28px rgba(7, 23, 46, 0.06);
}

.landing-form {
  background: var(--pc-white);
}

.landing-form,
.landing-form label,
.landing-form .form-label {
  color: var(--pc-ink);
}

.landing-form .form-label {
  margin-bottom: 0.45rem;
  font-weight: 800;
}

.landing-form .form-control,
.landing-form .form-select {
  color: var(--pc-ink);
  background-color: var(--pc-white);
}

.landing-form .form-control::placeholder {
  color: #58677d;
  opacity: 1;
}

.landing-form .invalid-feedback {
  color: #b42318;
}

.landing-form .form-note {
  color: #08415f;
}

.landing-form .form-note.is-success {
  color: #0f5132;
}

.landing-form .form-note.is-error {
  color: #842029;
}

.section-dark .btn-outline-primary {
  color: var(--pc-white);
  border-color: rgba(255, 255, 255, 0.55);
}

.section-dark .btn-outline-primary:hover,
.section-dark .btn-outline-primary:focus {
  color: var(--pc-navy);
  background: var(--pc-white);
  border-color: var(--pc-white);
}

.brand-card {
  display: flex;
  gap: 0.95rem;
  align-items: center;
}

.brand-card .icon-box {
  flex: 0 0 auto;
  margin: 0;
}

.contact-card a {
  color: var(--pc-blue);
  font-weight: 800;
  text-decoration: none;
}

.form-control,
.form-select {
  min-height: 3rem;
  border-color: #cad7e5;
  border-radius: 0.45rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--pc-cyan);
  box-shadow: 0 0 0 0.2rem rgba(16, 197, 232, 0.18);
}

.invalid-feedback {
  font-weight: 600;
}

.form-note {
  display: none;
  padding: 0.9rem 1rem;
  margin-top: 1rem;
  color: #08415f;
  background: #e5f8fc;
  border: 1px solid #b9edf6;
  border-radius: 0.5rem;
}

.form-note.is-visible {
  display: block;
}

.form-note.is-success {
  color: #0f5132;
  background: #d1e7dd;
  border-color: #badbcc;
}

.form-note.is-error {
  color: #842029;
  background: #f8d7da;
  border-color: #f5c2c7;
}

.form-help {
  display: block;
  margin-top: 0.45rem;
  color: #617089;
  font-size: 0.88rem;
}

.form-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.site-footer {
  padding: 3.5rem 0 2rem;
  color: #d7e7f4;
  background: #061326;
}

.site-footer h2,
.site-footer h3 {
  color: var(--pc-white);
}

.site-footer a {
  color: #d7e7f4;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--pc-cyan);
}

.footer-list {
  display: grid;
  gap: 0.55rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-bottom {
  padding-top: 1.5rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.whatsapp-float {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 1040;
  display: inline-grid;
  width: 3.45rem;
  height: 3.45rem;
  place-items: center;
  color: var(--pc-white);
  text-decoration: none;
  background: #21b55a;
  border-radius: 50%;
  box-shadow: 0 15px 34px rgba(33, 181, 90, 0.35);
}

.whatsapp-float:hover,
.whatsapp-float:focus {
  color: var(--pc-white);
  background: #169b48;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

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

:focus-visible {
  outline: 3px solid rgba(16, 197, 232, 0.75);
  outline-offset: 3px;
}

@media (max-width: 991.98px) {
  .navbar .btn {
    width: 100%;
    margin-top: 0.75rem;
  }

  .hero,
  .page-hero {
    min-height: auto;
    padding: 5rem 0 4rem;
  }
}

@media (max-width: 767.98px) {
  .section {
    padding: 3.6rem 0;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .brand-grid {
    grid-template-columns: 1fr;
  }

  .cta-band {
    padding: 1.35rem;
  }

  .whatsapp-float {
    right: max(0.85rem, env(safe-area-inset-right));
    bottom: max(0.85rem, env(safe-area-inset-bottom));
  }
}

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

  .service-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .section {
    padding: 5rem 0;
  }

  .landing-hero {
    padding: 6rem 0 4.5rem;
  }

  .landing-hero p {
    font-size: 1.18rem;
  }
}

@media (min-width: 992px) {
  .landing-hero {
    min-height: min(760px, calc(100vh - 76px));
    display: flex;
    align-items: center;
  }

  .hero-visual {
    margin-top: 0;
  }

  .trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
  }

  .trust-grid div {
    padding: 0.7rem 1rem;
    border-right: 1px solid var(--pc-line);
  }

  .trust-grid div:last-child {
    border-right: 0;
  }

  .service-index {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Identidad de la landing: azul del logotipo, papel cálido y acentos de impresión. */
.graphics-site { --pc-blue: #33477d; --pc-blue-2: #263760; --pc-soft: #f5f5f0; --pc-ink: #202b45; --pc-line: #e3e5e8; }
.graphics-site .navbar { padding-block: .95rem; background: #fffffff5; border-bottom: 1px solid #e3e5e8; backdrop-filter: blur(18px); }
.graphics-site .site-logo { width: 14rem; }
.graphics-site .navbar .nav-link { font-size: .83rem; padding-inline: .65rem; }
.graphics-site .navbar .btn { padding: .8rem 1rem; }
.graphics-site .btn { border-radius: .7rem; font-weight: 700; transition: background .2s ease, box-shadow .2s ease; }
.graphics-site .btn-primary { background: #33477d; border-color: #33477d; box-shadow: 0 6px 16px #33477d16; }
.graphics-site .btn-primary:hover { background: #263760; border-color: #263760; box-shadow: 0 8px 20px #33477d28; }
.graphics-site .btn-outline-primary { color: #33477d; border-color: #b8c0d0; }
.graphics-site .btn-outline-primary:hover, .graphics-site .btn-outline-primary.active { background: #33477d; border-color: #33477d; color: #fff; }
.graphics-site .section { padding-block: clamp(3.5rem,6vw,6rem); }
.graphics-site .section-title h2 { font-size: clamp(1.9rem,3.2vw,2.75rem); letter-spacing: -.04em; line-height: 1.12; }
.graphics-site .section-title > span { letter-spacing: .12em; font-size: .7rem; }
.graphics-site .section-title p { font-size: 1.05rem; line-height: 1.85; }
.graphics-site .studio-hero { min-height: 0; padding: 4.5rem 0 4rem; color: #202b45; background: radial-gradient(ellipse at 85% 35%,#dce4f4 0,transparent 46%),#f8f8f3; }
.studio-hero .studio-location { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border: 1px solid #d5ddd6; border-radius: 2rem; color: #33477d; background: #ffffffb0; font-size: .72rem; font-weight: 600; }
.studio-location > span { width: .4rem; height: .4rem; border-radius: 50%; background: #4c896b; }
.studio-hero .studio-kicker { margin: 1.5rem 0 1rem; color: #596783; font-size: .65rem; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; }
.graphics-site .studio-hero h1 { font-size: clamp(2.45rem,4.3vw,4.1rem); font-weight: 800; line-height: 1.05; letter-spacing: -.055em; margin-bottom: 1.35rem; }
.studio-hero h1 > span { color: #33477d; }
.studio-hero h1 > small { display: block; margin-top: 1.15rem; max-width: 25rem; font-size: .43em; font-weight: 600; letter-spacing: -.025em; line-height: 1.35; }
.studio-hero .studio-intro { max-width: 30rem; color: #59647a; font-size: .98rem; line-height: 1.8; }
.studio-hero .hero-actions { align-items: center; gap: 1.6rem; margin-top: 1.75rem; }
.studio-hero .btn-lg { font-size: .9rem; padding: 1rem 1.3rem; }
.studio-hero .btn i { margin-left: .75rem; }
.studio-services-link { display: inline-flex; align-items: center; gap: .8rem; padding-block: .7rem; color: #33477d; font-size: .85rem; font-weight: 700; text-underline-offset: .35em; }
.studio-services-link:hover { color: #1c294c; }
.studio-hero-note { display: flex; align-items: center; gap: .8rem; margin-top: 2rem; color: #687188; font-size: .74rem; line-height: 1.6; }
.studio-hero-note strong { color: #33477d; font-weight: 600; }
.studio-note-mark { display: grid; place-items: center; width: 2rem; height: 2rem; background: #e8ecf4; border-radius: 50%; color: #33477d; font-size: 1.4rem; }
.studio-collage { position: relative; min-height: 33rem; max-width: 36rem; margin-inline: auto; isolation: isolate; }
.studio-orbit { position: absolute; width: 92%; aspect-ratio: 1; top: 1rem; right: 0; border: 1px solid #33477d28; border-radius: 50%; z-index: -1; }
.studio-orbit::before { content: ""; position: absolute; width: 90%; height: 90%; top: 5%; left: 5%; border: 1px dashed #33477d20; border-radius: 50%; }
.studio-photo { position: absolute; margin: 0; padding: .65rem; background: #fff; border-radius: 1rem; box-shadow: 0 20px 50px #15274820; overflow: hidden; }
.studio-photo img { display: block; width: 100%; object-fit: cover; border-radius: .6rem; }
.studio-photo-main { top: 1.4rem; right: 1.1rem; width: 77%; transform: rotate(5deg); }
.studio-photo-main img { aspect-ratio: 1; }
.studio-photo-main figcaption { display: flex; justify-content: space-between; padding: .9rem .3rem .2rem; font-size: .78rem; font-weight: 600; color: #33477d; }
.studio-photo-detail { bottom: .75rem; left: 0; width: 43%; transform: rotate(-7deg); }
.studio-photo-detail img { aspect-ratio: 1.2; }
.studio-photo-detail figcaption { padding: .6rem .2rem .1rem; font-size: .65rem; font-weight: 600; color: #33477d; }
.studio-stamp { position: absolute; top: .5rem; left: -.4rem; display: flex; align-items: center; gap: .7rem; padding: 1rem; background: #e9ff86; border-radius: .7rem; color: #25365e; transform: rotate(-7deg); box-shadow: 0 8px 20px #26376015; }
.studio-stamp > span { font-size: 2.7rem; line-height: 1; }
.studio-stamp strong { font-size: .8rem; line-height: 1.3; }
.studio-color-label { position: absolute; right: .75rem; bottom: 1.5rem; display: flex; gap: .3rem; transform: rotate(3deg); }
.studio-color-label span { display: grid; place-items: center; width: 2rem; height: 2.6rem; border-radius: .25rem; background: #10c5e8; color: #07172e; font-size: .7rem; font-weight: 800; }
.studio-color-label span:nth-child(2) { background: #f06da9; }
.studio-color-label span:nth-child(3) { background: #ffda55; }
.studio-color-label span:nth-child(4) { background: #25365e; color: #fff; }
.graphics-site .trust-strip { background: #fff; padding-block: 1.4rem; }
.graphics-site .trust-grid strong { font-size: .88rem; }
.graphics-site .trust-grid span { font-size: .75rem; margin-top: .3rem; }
.graphics-site .industry-list li { border-radius: .85rem; font-size: .9rem; box-shadow: 0 4px 14px #33477d04; }
.graphics-site .need-card { border-radius: 1rem; box-shadow: none; border: 1px solid #e3e5e8; padding: 1.75rem; }
.graphics-site .need-card h3 { font-size: 1.1rem; letter-spacing: -.02em; }
.graphics-site .process-grid { gap: 1.3rem; counter-reset: steps; }
.graphics-site .process-grid li { position: relative; border-top: 2px solid #dfe4ee; padding-top: 1.3rem; }
.graphics-site .process-grid li::before { content: ""; position: absolute; width: .6rem; height: .6rem; top: -.36rem; left: 0; background: #33477d; border-radius: 50%; }
.graphics-site .process-grid span { font-size: 2.8rem; letter-spacing: -.06em; color: #33477d; }
.graphics-site .process-grid h3 { line-height: 1.5; }
.graphics-site .sector-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.graphics-site .sector-grid li { font-size: .85rem; text-align: center; background: transparent; border-radius: 3rem; }
.graphics-site .portfolio-filters { gap: .55rem; }
.graphics-site .portfolio-filters .btn { border-radius: 2rem; font-size: .8rem; padding: .6rem 1rem; }
.graphics-site .portfolio-card { border-radius: 1rem; border: 0; box-shadow: 0 6px 20px #33477d09; }
.graphics-site .portfolio-card img { border-radius: 1rem 1rem 0 0; }
.graphics-site .portfolio-card figcaption { padding: 1.1rem 1.25rem; color: #33477d; font-size: .9rem; }
.portfolio-card figcaption small { display: block; margin-top: .3rem; color: #6d7890; font-size: .65rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.portfolio-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.studio-about-art { padding: 2.5rem; background: #edf0f7; border-radius: 1.1rem; overflow: hidden; }
.studio-about-art > span { display: block; color: #66728c; font-size: .62rem; letter-spacing: .1em; }
.studio-about-art strong { display: block; margin-block: 2.5rem; font-size: clamp(2rem,3vw,3rem); line-height: 1.1; letter-spacing: -.055em; color: #33477d; }
.studio-about-art em { font-style: normal; }
.studio-about-art .services-ink-dots { margin-bottom: 1.4rem; }
.studio-about-art .services-ink-dots i { width: 1.3rem; height: 1.3rem; }
.graphics-site .studio-about .section-title { margin-bottom: 1.25rem; }
.graphics-site .cta-band { position: relative; overflow: hidden; border-radius: 1.4rem; padding: clamp(1.75rem,4vw,3.5rem); background: #33477d; }
.graphics-site .cta-band::after { position: absolute; right: -4rem; top: -5rem; content: ""; width: 20rem; height: 20rem; border: 1px solid #ffffff24; border-radius: 50%; pointer-events: none; }
.graphics-site .cta-band h2 { font-size: clamp(1.8rem,3vw,2.7rem); font-weight: 700; letter-spacing: -.04em; }
.graphics-site .cta-band p { max-width: 36rem; line-height: 1.8; }
.graphics-site .cta-band .hero-actions { position: relative; z-index: 1; }
.graphics-site #cotizacion { background: #f5f5f0; color: #202b45; }
.graphics-site #cotizacion .section-title h2 { color: #202b45; }
.graphics-site #cotizacion .section-title span { color: #33477d; }
.graphics-site #cotizacion .section-title p { color: #617089; }
.graphics-site #cotizacion .contact-stack a { color: #33477d; font-size: .9rem; }
.graphics-site #cotizacion .contact-stack p { font-size: .88rem; color: #617089; }
.graphics-site #cotizacion .btn-cyan { margin-top: 1.5rem; }
.graphics-site .landing-form { border-radius: 1.25rem; padding: clamp(1.25rem,3vw,2.25rem); border: 1px solid #e3e5e8; box-shadow: 0 16px 44px #33477d08; }
.graphics-site .landing-form .form-label { font-size: .78rem; font-weight: 600; }
.graphics-site .landing-form .form-control,.graphics-site .landing-form .form-select { border-radius: .65rem; padding: .7rem .85rem; border-color: #dfe3eb; }
.graphics-site .landing-form .form-help,.graphics-site .landing-form small { font-size: .72rem; line-height: 1.6; }
.graphics-site .site-footer { background: #111b34; padding-top: 3.5rem; }
.graphics-site .site-footer p { font-size: .9rem; max-width: 25rem; line-height: 1.8; }
.graphics-site .footer-list { font-size: .82rem; }
.graphics-site .footer-logo { width: 13rem; }
@media (min-width:1200px) { .graphics-site .navbar .site-logo { width: 12rem; } }
@media (max-width:991.98px) { .graphics-site .studio-hero { padding-block: 2.8rem; } .studio-hero-copy { max-width: 38rem; } .studio-collage { min-height: 33rem; margin-top: .5rem; } .graphics-site .sector-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:575.98px) { .graphics-site .studio-hero { padding-block: 2rem 2.5rem; } .graphics-site .studio-hero h1 { font-size: clamp(2.4rem,9.5vw,3.2rem); } .studio-hero h1 > small { font-size: .5em; } .studio-hero .hero-actions { gap: .75rem; } .studio-hero .hero-actions .btn { width: auto; } .studio-collage { min-height: 25rem; width: 100%; max-width: 25rem; } .studio-photo-main { top: 1.7rem; right: .7rem; width: 78%; } .studio-photo-detail { bottom: .5rem; left: .25rem; width: 43%; } .studio-stamp { left: .25rem; padding: .7rem; } .studio-stamp strong { font-size: .7rem; } .studio-stamp > span { font-size: 2rem; } .studio-color-label { bottom: .75rem; right: .5rem; } .studio-color-label span { width: 1.5rem; height: 2rem; } .studio-about-art { padding: 1.75rem; } .graphics-site .trust-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; } }
@media (max-width:359.98px) { .studio-collage { min-height: 22rem; } .graphics-site .sector-grid { grid-template-columns: 1fr; } }

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}