/* ═══════════════════════════════════════════════════════════════════════════
   TRIPLESHOT — pages.css
   Estilos específicos por página
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════
   INICIO — index.php
══════════════════════════════ */

/* Hero */
.hero--inicio .hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--sp-xl);
  min-height: 50vh;
  padding-block: var(--sp-xl);
}

.hero__image-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__laptop {
  width: 100%;
  max-width: 580px;
  filter: drop-shadow(0 20px 60px rgba(236,30,50,0.35));
  animation: hero-img-float 6s ease-in-out infinite;
}

.hero__dart {
  position: absolute;
  top: -8%;
  right: 5%;
  width: 70%;
  max-width: 420px;
  filter: drop-shadow(0 10px 30px rgba(236,30,50,0.5));
  transform-origin: bottom center;
  animation: hero-img-float 6s ease-in-out 0.8s infinite;
}

/* Parallax hint */
.hero__parallax-layer {
  transition: transform 0.1s linear;
  will-change: transform;
}

/* Glow pulse en hero */
.hero__glow-orb {
  position: absolute;
  top: 40%;
  right: 20%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236,30,50,0.3) 0%, transparent 70%);
  animation: glow-pulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Sección Servicios Highlight (dos columnas) */
.services-intro {
  position: relative;
  overflow: visible;
  padding-top: 0;
}

.services-intro::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 10%;
  width: 80%;
  height: 60px;
  background: linear-gradient(90deg, transparent, var(--c-primary-bright), transparent);
  filter: blur(25px);
  pointer-events: none;
  z-index: 1;
  animation: glow-line 3s ease-in-out infinite;
}

.services-intro__laser {
  position: relative;
  height: 1px;
  overflow: hidden;
  margin-bottom: var(--sp-xl);
}

.services-intro__laser::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent, var(--c-primary-bright) 50%, transparent);
  animation: laser-scan 3s ease-in-out infinite;
  filter: blur(2px);
}

.services-intro__triple-text {
  text-align: center;
  padding-block: var(--sp-xl);
}

.services-intro__triple-text h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-sm);
}

.services-intro__triple-text p {
  max-width: 680px;
  margin-inline: auto;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  line-height: var(--lh-loose);
}

/* Services full-width */
.services-slider {
  position: relative;
  overflow: hidden;
}

/* ─── ACCORDION DIAGONAL ──────────────────────────────────────────────────── */
.services-panels {
  display: flex;
  height: 65vh;
  min-height: 420px;
  max-height: 680px;
  overflow: hidden;
}

/* ── Grupo: flex-item principal (contiene 2 imágenes + 1 label) ─────────── */
.services-group {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  margin-left: -18px;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  transition: flex 0.55s cubic-bezier(.25,.46,.45,.94),
              filter 0.4s var(--ease);
}
.services-group:first-child {
  margin-left: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}
.services-group:last-child {
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
}

/* ── Panel interno (divide el espacio dentro del grupo) ─────────────────── */
.services-panel {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.services-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--ease);
  pointer-events: none;
}

/* Gradiente oscuro inferior */
.services-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,0,0,0.75) 0%, transparent 55%);
  pointer-events: none;
  z-index: 1;
}

/* ── Label único centrado sobre las dos imágenes del grupo ──────────────── */
.services-group__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1rem, 2vw, 1.8rem);
  color: var(--c-primary-bright);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 6px;
  padding: 0.6em 0.4em;
  z-index: 2;
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* HOVER — grupo activo */
.services-panels:hover .services-group:hover {
  flex: 4;
}
.services-panels:hover .services-group:hover img {
  transform: scale(1.04);
}
.services-panels:hover .services-group:hover .services-group__label {
  color: var(--c-white);
}

/* HOVER — grupos inactivos se oscurecen */
.services-panels:hover .services-group:not(:hover) {
  filter: brightness(0.55);
}
.services-panels:hover .services-group:not(:hover) .services-group__label {
  opacity: 0.5;
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */

.services-slider__img {
  width: 100%;
  height: 65vh;
  min-height: 420px;
  max-height: 680px;
  object-fit: cover;
  display: block;
}

.services-slider__label {
  position: absolute;
  bottom: var(--sp-md);
  left: var(--sp-md);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: var(--c-white);
  text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(0,0,0,0.8);
  letter-spacing: 0.05em;
}

.services-slider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,0,0,0.7) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

.services-slider .swiper-pagination {
  z-index: 2;
}

/* Radar de Herramientas */
.tools-radar {
  position: relative;
  padding-block: var(--sp-xl);
  text-align: center;
  overflow: hidden;
}

.tools-radar__svg-wrap {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto var(--sp-lg);
}

.tools-radar__svg {
  width: 100%;
  height: auto;
}

/* Líneas del radar */
.radar-arc {
  fill: none;
  stroke: rgba(236,30,50,0.3);
  stroke-width: 1;
  stroke-dasharray: var(--dash-len);
  stroke-dashoffset: var(--dash-len);
  animation: radar-draw 1.5s var(--ease) forwards;
}

.radar-arc:nth-child(1) { animation-delay: 0.2s; }
.radar-arc:nth-child(2) { animation-delay: 0.5s; }
.radar-arc:nth-child(3) { animation-delay: 0.8s; }
.radar-arc:nth-child(4) { animation-delay: 1.1s; }

.radar-line {
  stroke: rgba(236,30,50,0.25);
  stroke-width: 1;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: radar-draw 1s var(--ease) 0.3s forwards;
}

/* Punto central con ping */
.radar-center {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.radar-center__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-primary-bright);
  box-shadow: 0 0 20px var(--c-primary-glow);
  position: relative;
}

.radar-center__dot::before,
.radar-center__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c-primary-bright);
  opacity: 0.5;
  animation: radar-ping 1.8s ease-out infinite;
}
.radar-center__dot::after { animation-delay: 0.9s; }

/* Íconos de herramientas sobre el radar */
.tool-icon {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: tool-icon-in 0.5s var(--ease-back) forwards;
  transition: transform var(--t-fast) var(--ease-back);
  cursor: default;
  transform: translate(-50%, -50%);
}

.tool-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--r-md);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}

.tool-icon:hover { transform: translate(-50%, -50%) scale(1.2); z-index: 10; }

.tool-icon i {
  font-size: 1.6rem;
  line-height: 1;
  pointer-events: none;
}

.tool-abbr {
  font-size: 1.05rem;
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: -0.04em;
  line-height: 1;
  pointer-events: none;
}

/* Dot rojo en cada nodo del radar */
.radar-node {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-primary-bright);
  transform: translate(-50%,-50%);
  box-shadow: 0 0 8px var(--c-primary-glow);
}

.tools-radar__title { font-size: var(--fs-h2); font-weight: var(--fw-black); margin-bottom: var(--sp-xs); }
.tools-radar__desc { max-width: 640px; margin-inline: auto; line-height: var(--lh-loose); }

/* Blog preview en inicio */
.blog-preview {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--sp-xl);
  align-items: center;
  padding-block: var(--sp-xl);
}

.blog-preview__header h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: var(--fw-black); line-height: 1.2; margin-bottom: var(--sp-sm); }
.blog-preview__header p { margin-bottom: var(--sp-md); }

.blog-preview__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
}

/* ══════════════════════════════
   NOSOTROS — nosotros.php
══════════════════════════════ */
.ceo-section {
  padding-block: var(--sp-xl);
}

.ceo-spotlight {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-xl);
}

/* ── Stack de imágenes ── */
.ceo-spotlight__images {
  position: relative;
  width: 320px;
  aspect-ratio: 9 / 16;
}

.ceo-spotlight__img-wrap {
  position: absolute;
  inset: 0;
  transform-origin: bottom center;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.ceo-spotlight__img-wrap:not(.is-active) {
  opacity: 0.7;
  transform: rotate(-5deg) scale(0.95);
  z-index: 3;
}

.ceo-spotlight__img-wrap.is-active {
  opacity: 1;
  transform: none;
  z-index: 5;
}

.ceo-spotlight__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--r-xl);
  border: 1px solid var(--c-border);
  filter: grayscale(0.3);
  transition: filter var(--t-slow);
}

.ceo-spotlight__img-wrap.is-active .ceo-spotlight__img:hover {
  filter: grayscale(0);
}

/* ── Contenido de texto ── */
.ceo-spotlight__content {
  display: flex;
  flex-direction: column;
  padding-block: var(--sp-md);
}

.ceo-spotlight__person {
  display: none;
}

.ceo-spotlight__person.is-active {
  display: block;
  animation: ceo-person-in 0.4s var(--ease) forwards;
}

.ceo-spotlight__name {
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  color: var(--c-white);
  margin-top: var(--sp-xs);
  margin-bottom: 4px;
}

.ceo-spotlight__role {
  color: var(--c-primary-bright);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-sm);
}

.ceo-spotlight__bio {
  line-height: var(--lh-loose);
  color: var(--c-text-muted);
  margin-top: var(--sp-sm);
  text-align: justify;
}

/* ── Navegación ── */
.ceo-spotlight__nav {
  display: flex;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}

.ceo-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid transparent;
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: background var(--t-fast), transform var(--t-fast);
}

.ceo-nav-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--meteor-angle),
    transparent    0%,
    transparent    60%,
    rgba(246,21,5,0.18) 70%,
    rgba(246,21,5,0.55) 79%,
    #F61505        83%,
    #ffffff        85%,
    #F61505        87%,
    rgba(246,21,5,0.35) 92%,
    transparent    97%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: meteor-spin 3.5s linear infinite;
  pointer-events: none;
}

.ceo-nav-btn:hover {
  background: var(--c-primary);
  transform: scale(1.1);
}

.team-section {
  padding-block: var(--sp-xl);
}

.swiper--team {
  padding-bottom: 2.5rem !important;
}

.swiper--team .swiper-pagination {
  bottom: 0;
}

.team-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-align: center;
  transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}

.team-card:hover {
  transform: translateY(-8px);
  border-color: var(--c-primary);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px var(--c-primary-glow-sm);
}

.team-card__img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top;
  filter: grayscale(1);
  transition: filter var(--t-slow);
}
.team-card:hover .team-card__img { filter: grayscale(0.3); }

.team-card__body { padding: var(--sp-sm); }
.team-card__name {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary-bright);
}
.team-card__role { font-size: var(--fs-small); color: var(--c-text-muted); }

/* ══════════════════════════════
   SERVICIOS — services.php
══════════════════════════════ */
.branding-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
  align-items: center;
  padding-block: var(--sp-xl);
}

.branding-section__img {
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
}

.branding-section__img img {
  width: 100%;
  transition: transform var(--t-slow);
}
.branding-section__img:hover img { transform: scale(1.04); }

.branding-section__stat {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(0.9rem, 1.4vw, 1rem);
  color: var(--c-primary-bright);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-sm);
}

.branding-section__formats {
  display: flex;
  gap: var(--sp-xs);
  flex-wrap: wrap;
  margin-top: var(--sp-sm);
}

.format-badge {
  background: rgba(236,30,50,0.12);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 4px 14px;
  font-size: var(--fs-xs);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--c-primary-bright);
  letter-spacing: 0.08em;
  position: relative;
  isolation: isolate;
}

.format-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--meteor-angle),
    transparent    0%,
    transparent    60%,
    rgba(246,21,5,0.18) 70%,
    rgba(246,21,5,0.55) 79%,
    #F61505        83%,
    #ffffff        85%,
    #F61505        87%,
    rgba(246,21,5,0.35) 92%,
    transparent    97%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: meteor-spin 2s linear infinite;
  pointer-events: none;
}

.indecopi-section {
  text-align: center;
  padding-block: var(--sp-sm) var(--sp-md);
}

/* ══════════════════════════════
   BLOG — blog.php
══════════════════════════════ */
.blog-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
  align-items: center;
  padding-block: var(--sp-xl);
}

.blog-featured__meta {
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: var(--sp-xs);
}

.blog-featured__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-sm);
  color: var(--c-white);
}

.blog-featured__excerpt { line-height: var(--lh-loose); margin-bottom: var(--sp-md); }

.blog-featured__img {
  width: 100%;
  border-radius: var(--r-xl);
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform var(--t-slow);
  display: block;
}
.blog-featured__img:hover { transform: scale(1.02); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
  padding-block: var(--sp-lg);
}

/* ══════════════════════════════
   BLOG SINGLE — blog-single.php
══════════════════════════════ */
.blog-single__hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--sp-xl);
  overflow: hidden;
  margin-top: calc(-1 * var(--nav-h));
}

.blog-single__hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.35);
  transform: scale(1.05);
  z-index: 0;
}

.blog-single__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8,0,0,0.98) 0%,
    rgba(8,0,0,0.55) 55%,
    rgba(8,0,0,0.2) 100%
  );
  z-index: 1;
}

.blog-single__hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding-top: calc(var(--nav-h) + var(--sp-xl));
}

.blog-single__hero-title {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  color: var(--c-white);
  margin-block: var(--sp-sm) var(--sp-xs);
}

.blog-single__hero-subtitle {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--c-text-muted);
  margin-bottom: var(--sp-sm);
  line-height: var(--lh-normal);
}

.blog-single__hero-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blog-single__hero-meta-sep { opacity: 0.4; }

.blog-single__back {
  color: var(--c-primary-bright);
  font-weight: var(--fw-semibold);
  transition: color var(--t-fast);
}
.blog-single__back:hover { color: var(--c-white); }

/* ── Artículo ── */
.blog-article { padding-block: var(--sp-lg); }

.blog-article__intro {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  color: var(--c-text);
  line-height: var(--lh-loose);
  border-left: 3px solid var(--c-primary);
  padding-left: var(--sp-md);
  margin-bottom: var(--sp-lg);
}

.blog-article__section {
  margin-bottom: var(--sp-lg);
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--c-border);
}
.blog-article__section:last-of-type { border-bottom: none; }

.blog-article__section-header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}

.blog-article__section-num {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 0.8rem;
  color: var(--c-primary-bright);
  letter-spacing: 0.05em;
  flex-shrink: 0;
  min-width: 28px;
  padding-top: 3px;
}

.blog-article__section-title {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: var(--fw-bold);
  color: var(--c-white);
  line-height: var(--lh-snug);
}

.blog-article__section-body p {
  color: var(--c-text-muted);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-sm);
}
.blog-article__section-body p:last-child { margin-bottom: 0; }

.blog-article__section-body ul {
  list-style: disc;
  padding-left: var(--sp-md);
  margin-block: var(--sp-xs);
  color: var(--c-text-muted);
}
.blog-article__section-body li {
  line-height: var(--lh-loose);
  margin-bottom: 4px;
}
.blog-article__section-body strong { color: var(--c-white); }

.blog-article__highlight {
  border-left: 4px solid var(--c-primary-bright);
  background: rgba(236,30,50,0.07);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--sp-sm) var(--sp-md);
  margin-block: var(--sp-sm);
  font-size: 1.05rem;
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  font-style: italic;
  line-height: var(--lh-snug);
}

.blog-article__conclusion {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  margin-top: var(--sp-lg);
}

.blog-article__conclusion-label {
  font-size: var(--fs-h3);
  color: var(--c-primary-bright);
  margin-bottom: var(--sp-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.blog-article__conclusion p {
  color: var(--c-text-muted);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-sm);
}

.blog-article__cta-line {
  color: var(--c-text) !important;
  font-weight: var(--fw-semibold);
}

/* ── Grid relacionados ── */
.blog-grid--related {
  grid-template-columns: repeat(3, 1fr);
  padding-block: var(--sp-md);
}

.blog-grid__cta {
  text-align: center;
  margin-top: var(--sp-lg);
}

/* ══════════════════════════════
   SERVICE HERO — hero con imagen de fondo + título grande overlay
   (branding.php · social-media.php · diseno-web.php)
══════════════════════════════ */
.service-hero {
  position: relative;
  height: calc((100vh - var(--nav-h)) * 2 / 3);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.service-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  filter: brightness(1);
  z-index: 0;
}


.service-hero__overlay {
  display: none;
}

/* Nombre grande decorativo (BRANDING / SOCIAL MEDIA / DISEÑO WEB) */
.service-hero__bg-title {
  position: absolute;
  bottom: -0.12em;
  right: -0.04em;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(5rem, 17vw, 17rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(236,30,50,0.18);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  white-space: nowrap;
}

.service-hero__content {
  position: relative;
  z-index: 3;
  max-width: 720px;
  padding-block: var(--sp-xl);
  text-align: center;
  margin-inline: auto;
}

/* ══════════════════════════════
   BRANDING — branding.php
══════════════════════════════ */

/* Hero image-only: sin barra superior, tag en esquina inferior derecha */
.service-hero--image-only { display: flex; }

/* Overlay negro transparente sobre toda la imagen */
.service-hero__dark-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 1;
}

/* Bloque de texto anclado en la parte inferior izquierda */
.service-hero__bottom-label {
  position: absolute;
  bottom: var(--sp-lg);
  left: var(--sp-xl);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.service-hero__bottom-label-tag {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(0.65rem, 1vw, 0.8rem);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--c-primary-bright);
}

.service-hero__bottom-label-title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.8rem, 7vw, 6rem);
  color: var(--c-white);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}

.service-hero__bottom-label-line {
  display: block;
  width: 60px;
  height: 3px;
  background: var(--c-primary-bright);
  border-radius: 2px;
  margin: 4px 0;
}

.service-hero__bottom-label-sub {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  color: rgba(255, 255, 255, 0.75);
  font-weight: var(--fw-medium);
}

/* Diseño Web hero — iconos tech flotantes sobre la imagen existente */
.web-hero-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.web-hero-icon {
  position: absolute;
  line-height: 1;
}

.web-hero-icon--1  { top: 10%; left: 6%;  font-size: 3.5rem; opacity: 0.60; color: #E34F26; animation: sm-float-1  6s   ease-in-out infinite; }
.web-hero-icon--2  { top: 18%; left: 62%; font-size: 5rem;   opacity: 0.35; color: #1572B6; animation: sm-float-2  8s   ease-in-out infinite; }
.web-hero-icon--3  { top: 6%;  left: 38%; font-size: 4rem;   opacity: 0.45; color: #F7DF1E; animation: sm-float-3  7s   ease-in-out infinite; }
.web-hero-icon--4  { top: 55%; left: 22%; font-size: 2.5rem; opacity: 0.40; color: #61DAFB; animation: sm-float-1  9s   ease-in-out infinite 1s; }
.web-hero-icon--5  { top: 62%; left: 72%; font-size: 2rem;   opacity: 0.35; color: #777BB4; animation: sm-float-2  7s   ease-in-out infinite 2s; }
.web-hero-icon--6  { top: 24%; left: 84%; font-size: 5.5rem; opacity: 0.18; color: #339933; animation: sm-float-3  10s  ease-in-out infinite 0.5s; }
.web-hero-icon--7  { top: 70%; left: 46%; font-size: 1.8rem; opacity: 0.35; color: #3776AB; animation: sm-float-1  6.5s ease-in-out infinite 3s; }
.web-hero-icon--8  { top: 8%;  left: 23%; font-size: 2.2rem; opacity: 0.40; color: #F05032; animation: sm-float-2  7.5s ease-in-out infinite 1.5s; }
.web-hero-icon--9  { top: 40%; left: 6%;  font-size: 2.5rem; opacity: 0.30; color: #21759B; animation: sm-float-3  8.5s ease-in-out infinite 2s; }
.web-hero-icon--10 { top: 36%; left: 52%; font-size: 1.8rem; opacity: 0.32; color: #7952B3; animation: sm-float-1  7s   ease-in-out infinite 4s; }
.web-hero-icon--11 { top: 76%; left: 84%; font-size: 3rem;   opacity: 0.35; color: #CC6699; animation: sm-float-2  9s   ease-in-out infinite 1s; }
.web-hero-icon--12 { top: 52%; left: 90%; font-size: 2rem;   opacity: 0.30; color: #ffffff; animation: sm-float-3  6s   ease-in-out infinite 2.5s; }
.web-hero-icon--13 { top: 78%; left: 14%; font-size: 2.8rem; opacity: 0.38; color: #4FC08D; animation: sm-float-1  8s   ease-in-out infinite 0.8s; }
.web-hero-icon--14 { top: 46%; left: 68%; font-size: 1.6rem; opacity: 0.35; color: #DD0031; animation: sm-float-2  6.5s ease-in-out infinite 3.5s; }
.web-hero-icon--15 { top: 16%; left: 34%; font-size: 1.5rem; opacity: 0.30; color: #2496ED; animation: sm-float-3  7.5s ease-in-out infinite 1.2s; }
.web-hero-icon--16 { top: 68%; left: 32%; font-size: 3.2rem; opacity: 0.22; color: #CB3837; animation: sm-float-1  9.5s ease-in-out infinite 2.8s; }

/* Branding hero — fondo oscuro + iconos de diseño flotantes */
.service-hero--branding {
  background: linear-gradient(135deg, #0A0005 0%, #150010 50%, #0D0000 100%);
}

.branding-hero-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.branding-hero-icon {
  position: absolute;
  line-height: 1;
}

.branding-hero-icon--1  { top: 10%; left: 5%;  font-size: 3.2rem; opacity: 0.55; color: #F5C518; animation: sm-float-1  6s   ease-in-out infinite; }
.branding-hero-icon--2  { top: 15%; left: 65%; font-size: 5rem;   opacity: 0.25; color: #9B59B6; animation: sm-float-2  8s   ease-in-out infinite; }
.branding-hero-icon--3  { top: 50%; left: 20%; font-size: 2.4rem; opacity: 0.30; color: #1ABC9C; animation: sm-float-3  7s   ease-in-out infinite; }
.branding-hero-icon--4  { top: 5%;  left: 40%; font-size: 3.8rem; opacity: 0.20; color: rgba(255,255,255,0.9); animation: sm-float-1 9s ease-in-out infinite 1s; }
.branding-hero-icon--5  { top: 60%; left: 70%; font-size: 2rem;   opacity: 0.30; color: #E67E22; animation: sm-float-2  7s   ease-in-out infinite 2s; }
.branding-hero-icon--6  { top: 22%; left: 85%; font-size: 5.5rem; opacity: 0.15; color: #F5C518; animation: sm-float-3  10s  ease-in-out infinite 0.5s; }
.branding-hero-icon--7  { top: 68%; left: 47%; font-size: 1.8rem; opacity: 0.28; color: #E91E8C; animation: sm-float-1  6.5s ease-in-out infinite 3s; }
.branding-hero-icon--8  { top: 8%;  left: 22%; font-size: 2rem;   opacity: 0.32; color: #9B59B6; animation: sm-float-2  7.5s ease-in-out infinite 1.5s; }
.branding-hero-icon--9  { top: 38%; left: 5%;  font-size: 2.5rem; opacity: 0.28; color: #1ABC9C; animation: sm-float-3  8.5s ease-in-out infinite 2s; }
.branding-hero-icon--10 { top: 35%; left: 52%; font-size: 1.8rem; opacity: 0.25; color: #E67E22; animation: sm-float-1  7s   ease-in-out infinite 4s; }
.branding-hero-icon--11 { top: 75%; left: 83%; font-size: 3rem;   opacity: 0.35; color: #F5C518; animation: sm-float-2  9s   ease-in-out infinite 1s; }
.branding-hero-icon--12 { top: 52%; left: 89%; font-size: 2rem;   opacity: 0.28; color: #3498DB; animation: sm-float-3  6s   ease-in-out infinite 2.5s; }
.branding-hero-icon--13 { top: 78%; left: 14%; font-size: 2.8rem; opacity: 0.30; color: var(--c-primary); animation: sm-float-1 8s ease-in-out infinite 0.8s; }
.branding-hero-icon--14 { top: 45%; left: 68%; font-size: 1.6rem; opacity: 0.25; color: #2ECC71; animation: sm-float-2  6.5s ease-in-out infinite 3.5s; }
.branding-hero-icon--15 { top: 18%; left: 35%; font-size: 1.5rem; opacity: 0.22; color: rgba(255,255,255,0.7); animation: sm-float-3 7.5s ease-in-out infinite 1.2s; }
.branding-hero-icon--16 { top: 70%; left: 32%; font-size: 3.5rem; opacity: 0.18; color: #E91E8C; animation: sm-float-1  9.5s ease-in-out infinite 2.8s; }

/* Social Media hero — fondo oscuro corporativo + iconos flotantes */
.service-hero--social {
  background: linear-gradient(135deg, #0E0005 0%, #1A000E 50%, #0A0000 100%);
}

.social-hero-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.social-hero-icon {
  position: absolute;
  color: var(--c-white);
  line-height: 1;
}

.social-hero-icon--1 { top: 12%; left: 7%;  font-size: 3rem;   opacity: 0.55; color: #E1306C; animation: sm-float-1  6s   ease-in-out infinite; }
.social-hero-icon--2 { top: 20%; left: 60%; font-size: 5.5rem; opacity: 0.30; color: #69C9D0; animation: sm-float-2  8s   ease-in-out infinite; }
.social-hero-icon--3 { top: 55%; left: 28%; font-size: 2.2rem; opacity: 0.30; color: #1877F2; animation: sm-float-3  7s   ease-in-out infinite; }
.social-hero-icon--4 { top: 8%;  left: 42%; font-size: 4rem;   opacity: 0.45; color: #FF0000; animation: sm-float-1  9s   ease-in-out infinite 1s; }
.social-hero-icon--5 { top: 60%; left: 72%; font-size: 2rem;   opacity: 0.35; color: #0A66C2; animation: sm-float-2  7s   ease-in-out infinite 2s; }
.social-hero-icon--6 { top: 25%; left: 82%; font-size: 6rem;   opacity: 0.18; color: #E1306C; animation: sm-float-3  10s  ease-in-out infinite 0.5s; }
.social-hero-icon--7 { top: 68%; left: 48%; font-size: 1.8rem; opacity: 0.30; color: #69C9D0; animation: sm-float-1  6.5s ease-in-out infinite 3s; }
.social-hero-icon--8  { top: 8%;  left: 22%; font-size: 2rem;   opacity: 0.38; color: #1877F2; animation: sm-float-2  7.5s ease-in-out infinite 1.5s; }
.social-hero-icon--9  { top: 40%; left: 5%;  font-size: 2.5rem; opacity: 0.28; color: #FF0000; animation: sm-float-3  8.5s ease-in-out infinite 2s; }
.social-hero-icon--10 { top: 35%; left: 50%; font-size: 1.8rem; opacity: 0.30; color: #0A66C2; animation: sm-float-1  7s   ease-in-out infinite 4s; }
.social-hero-icon--11 { top: 75%; left: 85%; font-size: 3rem;   opacity: 0.35; color: #E1306C; animation: sm-float-2  9s   ease-in-out infinite 1s; }
.social-hero-icon--12 { top: 50%; left: 90%; font-size: 2rem;   opacity: 0.25; color: #69C9D0; animation: sm-float-3  6s   ease-in-out infinite 2.5s; }
.social-hero-icon--13 { top: 80%; left: 12%; font-size: 2.8rem; opacity: 0.30; color: #1877F2; animation: sm-float-1  8s   ease-in-out infinite 0.8s; }
.social-hero-icon--14 { top: 45%; left: 68%; font-size: 1.6rem; opacity: 0.25; color: #FF0000; animation: sm-float-2  6.5s ease-in-out infinite 3.5s; }
.social-hero-icon--15 { top: 15%; left: 35%; font-size: 1.5rem; opacity: 0.22; color: #0A66C2; animation: sm-float-3  7.5s ease-in-out infinite 1.2s; }
.social-hero-icon--16 { top: 72%; left: 33%; font-size: 3.5rem; opacity: 0.18; color: #E1306C; animation: sm-float-1  9.5s ease-in-out infinite 2.8s; }

@keyframes sm-float-1 {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
@keyframes sm-float-2 {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
@keyframes sm-float-3 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-15px) rotate(4deg); }
}

/* Elimina padding-top de la sección inmediata al hero para evitar gap visible */
.service-hero + section,
.service-hero + .section {
  padding-top: 0;
}

/* Overlay oscuro sutil para que el card sea legible sobre la imagen */
.service-hero__overlay {
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(8,0,0,0.65) 0%, rgba(8,0,0,0.2) 65%, transparent 100%);
  z-index: 1;
}

/* Contenedor dentro del hero necesita z-index por encima del overlay */
.service-hero .container {
  position: relative;
  z-index: 3;
  width: 100%;
}

/* ─── CARD glassmorphism + meteor border (igual que .card, sin hover) ─── */
.service-hero__card {
  max-width: 500px;
  padding: var(--sp-lg) var(--sp-xl);
  background: rgba(8, 0, 0, 0.58);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.service-hero__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--meteor-angle),
    transparent         0%,
    transparent         60%,
    rgba(246,21,5,0.18) 70%,
    rgba(246,21,5,0.55) 79%,
    #F61505             83%,
    #ffffff             85%,
    #F61505             87%,
    rgba(246,21,5,0.35) 92%,
    transparent         97%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: meteor-spin 3.5s linear infinite;
  pointer-events: none;
}

.service-hero__card h1 {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  margin: var(--sp-xs) 0 var(--sp-sm);
  color: var(--c-white);
}

.service-hero__card p {
  font-size: var(--fs-body);
  color: var(--c-text-muted);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-md);
}

.page-diseno-web .service-hero__bg {
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center center;
}

/* Tag "BRANDING / SOCIAL MEDIA / DISEÑO WEB" — esquina inferior derecha */
.service-hero__brand-tag {
  position: absolute;
  bottom: var(--sp-lg);
  right: var(--sp-lg);
  z-index: 4;
  background: rgba(109,5,28,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--r-md);
  padding: 12px 28px 14px;
  animation: brand-tag-in 0.75s cubic-bezier(.25,.46,.45,.94) 0.4s both;
}

.service-hero__brand-tag-text {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.88);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 6px;
}

/* Línea roja debajo del texto que se expande al cargar */
.service-hero__brand-tag-line {
  display: block;
  height: 2px;
  background: rgba(255,255,255,0.85);
  width: 0;
  animation: brand-line-expand 0.6s var(--ease) 1.05s forwards;
  box-shadow: 0 0 8px rgba(255,255,255,0.3);
}

/* Quote grande destacada */
.branding-quote {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  color: var(--c-white);
  text-align: center;
  line-height: var(--lh-snug);
  max-width: 720px;
  margin-inline: auto;
  padding-block: var(--sp-lg) var(--sp-sm);
}

.branding-method-label,
.branding-manual-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  text-align: center;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  margin-bottom: var(--sp-lg);
}

.branding-manual-label {
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-md);
}

/* Steps en burbujas redondeadas (2x3 grid) */
.branding-method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}

.branding-method-step {
  background: rgba(236,30,50,0.09);
  border: 1.5px solid rgba(236,30,50,0.32);
  border-radius: var(--r-xl);
  padding: var(--sp-md);
  transition: border-color var(--t-mid), background var(--t-mid), transform var(--t-mid);
}

.branding-method-step:hover {
  border-color: var(--c-primary);
  background: rgba(236,30,50,0.16);
  transform: translateY(-3px);
}

.branding-method-step__header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-xs);
}

.branding-method-step__num {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 0.78rem;
  color: var(--c-primary-bright);
  background: rgba(236,30,50,0.15);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

.branding-method-step__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--c-white);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}

.branding-method-step__desc {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  line-height: var(--lh-normal);
}

/* Carrusel auto-play Manual de Marca */
.mm-carousel-wrapper {
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.mm-carousel-viewport {
  overflow: hidden;
}

.mm-carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.mm-slide {
  min-width: 25%;
  flex-shrink: 0;
  height: 220px;
  border-right: 1px solid rgba(236,30,50,0.15);
}

.mm-slide:last-child { border-right: none; }

.mm-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Aplicaciones de Marca */
.aplicaciones-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  margin-top: var(--sp-xl);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.15);
}

.aplicaciones-box {
  background: transparent;
  padding: var(--sp-xl) var(--sp-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.aplicaciones-box h2 {
  color: var(--c-white);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  margin-bottom: var(--sp-sm);
}

.aplicaciones-box p {
  color: rgba(255,255,255,0.88);
  line-height: var(--lh-loose);
}

.aplicaciones-wrap .branding-section__img {
  height: 100%;
  min-height: 320px;
}

.aplicaciones-wrap .branding-section__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* CTA intermedio */
.branding-cta-mid {
  text-align: center;
  margin-top: var(--sp-xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--c-border);
}

.branding-cta-mid__text {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  color: var(--c-white);
  margin-bottom: var(--sp-md);
}

/* Proyectos — grid masonry */
.branding-projects-section {
  background-color: transparent;
}

.branding-projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 240px 240px;
  gap: var(--sp-xs);
  margin-top: var(--sp-lg);
}

/* Cancelar aspect-ratio heredado para que las celdas del grid manden el tamaño */
.branding-projects-grid .project-card {
  border-radius: var(--r-md);
  aspect-ratio: unset;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

/* Fondo difuminado — misma imagen, oscurecida y con blur */
.branding-projects-grid .project-card::before {
  content: '';
  position: absolute;
  inset: -20px;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(18px) brightness(0.45);
  z-index: 0;
}

/* Col 3 / derecha: ocupa ambas filas (imagen vertical) */
.branding-projects-grid .project-card:nth-child(3) {
  grid-column: 3;
  grid-row: 1 / 3;
}

/* Imagen completa y nítida encima del fondo difuminado */
.branding-projects-grid .project-card img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Full-width banner — carrusel de portafolio */
.branding-fullwidth-banner {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.branding-fullwidth-banner .swiper--portfolio {
  width: 100%;
  height: 260px;
}

.branding-fullwidth-banner .swiper-slide {
  height: 260px;
}

.branding-fullwidth-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.branding-fullwidth-banner .img-slot {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
  height: 100%;
  min-height: unset;
  background: rgba(0,0,0,0.3);
}

/* Sección que contiene el orbital — más espacio arriba y abajo */
.section:has(.clients-orbital-wrap) {
  padding-top: var(--sp-2xl);
  padding-bottom: var(--sp-2xl);
}

/* Clientes orbital */
.clients-orbital-wrap {
  position: relative;
  width: 100%;
  max-width: 680px;
  height: 580px;
  margin: var(--sp-xl) auto var(--sp-xl);
  animation: orbital-spin 34s linear infinite;
}

.clients-orbital-wrap:hover {
  animation-play-state: paused;
}

/* Wrapper de la diana — solo maneja la contra-rotación */
.clients-orbital-diana-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  z-index: 2;
  pointer-events: none;
  animation: orbital-diana-counter 34s linear infinite;
}

.clients-orbital-wrap:hover .clients-orbital-diana-wrap {
  animation-play-state: paused;
}

/* SVG de la diana — solo maneja el pulso expansivo */
.clients-orbital-diana {
  width: 100%;
  height: 100%;
  display: block;
  animation: diana-pulse 3s ease-in-out infinite;
}

.clients-orbital-wrap:hover .clients-orbital-diana {
  animation-play-state: paused;
}

.orbital-logo {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default;
  border-radius: 6px;
  padding: 4px 10px;
  transition: background var(--t-mid) var(--ease),
              backdrop-filter var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
  /* contra-rotación para que el texto siempre sea legible */
  animation: orbital-item-counter 34s linear infinite;
}

.orbital-logo:hover {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px rgba(255,255,255,0.08),
              inset 0 0 0 1px rgba(255,255,255,0.2);
}

.clients-orbital-wrap:hover .orbital-logo {
  animation-play-state: paused;
}

.orbital-logo img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  object-position: center;
  filter: brightness(0) invert(1);
  opacity: 0.75;
  transition: opacity var(--t-fast), filter var(--t-fast);
  display: block;
}

.orbital-logo:hover img {
  opacity: 1;
  filter: none;
}

.orbital-logo__text {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 0.65rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  text-align: center;
  transition: color var(--t-fast);
}

.orbital-logo:hover .orbital-logo__text { color: var(--c-white); }

/* FAQ sin fondo propio */
.faq--red {
  background: transparent;
}

/* CTA Final con mascota */
.branding-cta-final {
  background: linear-gradient(135deg, var(--c-primary) 0%, #A00000 100%);
  padding: var(--sp-xl) var(--sp-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
}

.branding-cta-final__texto {
  max-width: 760px;
  text-align: justify;
  padding: var(--sp-lg) 0 var(--sp-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.branding-cta-final__texto-titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1rem, 2vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-white);
  text-align: center;
  margin-bottom: var(--sp-xs);
}

.branding-cta-final__texto p {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
}

.branding-cta-final__mascota {
  width: clamp(220px, 35vw, 340px);
  height: auto;
  object-fit: contain;
  display: block;
}

.btn--brand-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  background: transparent;
  color: var(--c-white);
  border: 2px solid rgba(255,255,255,0.55);
  border-radius: var(--r-pill);
  padding: 0.85em 2.2em;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.btn--brand-cta:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--c-white);
  transform: scale(1.04);
}

/* ══════════════════════════════
   SOCIAL MEDIA — social-media.php
══════════════════════════════ */

/* Línea roja decorativa (compartida entre secciones) */
.red-divider {
  width: 220px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-primary-bright), transparent);
  margin: var(--sp-xs) auto 0;
  opacity: 0.8;
}

/* 1.2 — Quote cursiva */
.sm-intro-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  color: var(--c-text);
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--sp-lg);
  line-height: var(--lh-snug);
}

/* 1.2 — Grid 2 cols: bullets izq + teléfonos der */
.sm-intro-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
  align-items: center;
}

.sm-intro-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  border: 1.5px solid var(--c-primary-bright);
  border-radius: var(--r-lg);
  padding: var(--sp-md) var(--sp-lg);
  background: rgba(255, 255, 255, 0.04);
}

.sm-intro-bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  color: var(--c-text-muted);
  line-height: var(--lh-loose);
  font-size: var(--fs-small);
}

.sm-intro-bullet::before {
  content: '•';
  color: var(--c-primary-bright);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.sm-intro-phones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
  align-items: center;
}

.sm-intro-phones img {
  border-radius: var(--r-xl);
  transform: none;
  outline: 2px dashed var(--c-primary-bright);
  outline-offset: 8px;
}

/* 1.3 — Strip de 4 imágenes de contenido */
.sm-content-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: var(--sp-md);
}

.sm-content-strip .img-slot {
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid rgba(236,30,50,0.15);
  min-height: 170px;
  background: rgba(0,0,0,0.25);
}

.sm-content-strip .img-slot:last-child { border-right: none; }

/* ── Carrusel de proyectos (diseno-web.php) — igual al mm-carousel ────────── */
.proyectos-carousel-wrapper {
  border-radius: var(--r-lg);
  overflow: hidden;
}
.proyectos-carousel-viewport {
  overflow: hidden;
}
.proyectos-carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.proyectos-slide {
  min-width: 25%;
  flex-shrink: 0;
  height: 220px;
  border-right: 1px solid rgba(236,30,50,0.15);
}
.proyectos-slide:last-child { border-right: none; }
.proyectos-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .proyectos-slide { min-width: 50%; height: 160px; }
}
@media (max-width: 480px) {
  .proyectos-slide { min-width: 100%; height: 200px; }
}

/* Paneo izquierda → derecha de imagen panorámica */
.sm-pan-wrapper {
  overflow: hidden;
  width: 100%;
  height: 400px;
  margin-top: var(--sp-md);
}

.sm-pan-img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;       /* ← Deja que la altura sea proporcional */

}

@keyframes sm-pan-lr {
  0%  { transform: translateX(0%); }
  100% { transform: translateX(50%); }
}


@media (min-width: 768px) {
  .sm-pan-wrapper {
    max-height: 160px; /* tablet */
  }
}

@media (min-width: 1200px) {
  .sm-pan-wrapper {
    max-height: 200px; /* desktop grande */
  }
}

/* ── Divisor nebulosa/neón entre secciones ──────────────────────────────────
   Aplica en branding, social media y diseño web mediante body class         */
.page-branding .section::after,
.page-social-media .section::after,
.page-diseno-web .section::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -5%;
  width: 110%;
  height: 60px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 50%,
      var(--c-primary)         0%,
      rgba(236, 30, 50, 0.6)   30%,
      rgba(236, 30, 50, 0.2)   60%,
      transparent              85%);
  background-size: 100% 100%;
  background-position: center;
  filter: blur(7px);
  animation: nebula-full 3.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
  transform-origin: center;
}

@keyframes nebula-full {
  0%, 100% {
    opacity: 0.35;
    transform: scaleY(0.4);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* 1.5 — Proyectos: 6 imgs en 2 filas de 3 */
.sm-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}

/* Grid 3 columnas - Layout compacto estilo referencia */
.sm-projects-grid--zigzag {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
  gap: var(--sp-xs);
  margin-top: var(--sp-lg);
}

.sm-projects-grid--zigzag .project-card {
  border-radius: var(--r-sm);
  overflow: hidden;
  background: transparent;
  border: none;
  transition: transform var(--t-fast);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sm-projects-grid--zigzag .project-card:hover {
  transform: scale(1.03);
}

.sm-projects-grid--zigzag .project-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: filter var(--t-fast);
}

.sm-projects-grid--zigzag .project-card:hover img {
  filter: brightness(1.1);
}

/* p7 en columna 2, fila 3 */
.sm-projects-grid--zigzag .project-card:nth-child(7) {
  grid-column: 2;
}

/* Texto de transición al final de proyectos */
.sm-section-transition {
  text-align: center;
  margin-top: var(--sp-xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--c-border);
}

.sm-section-transition__text {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  color: var(--c-white);
}

/* 1.6 — Detrás de cámaras: título centrado */
.sm-behind-header {
  text-align: center;
  margin-bottom: var(--sp-lg);
}

.sm-behind-header h2 {
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  font-weight: var(--fw-bold);
  color: var(--c-white);
  margin-bottom: var(--sp-xs);
}

/* Grid de 3 videos/fotos con botón play */
.sm-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}

.sm-video-thumb {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--c-border);
}

.sm-video-thumb .img-slot {
  height: 100%;
  border-radius: 0;
  border: none;
  min-height: unset;
}

.sm-video-thumb__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.sm-video-thumb__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.88);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.sm-video-thumb__play::after {
  content: '';
  border-style: solid;
  border-width: 9px 0 9px 18px;
  border-color: transparent transparent transparent var(--c-primary);
  margin-left: 5px;
  display: block;
}

/* 1.7 y 1.8 — Grillas: encabezado + 2 cols */
.sm-grillas-header {
  text-align: center;
  margin-bottom: var(--sp-lg);
}

.sm-grillas-header h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  color: var(--c-white);
  margin-bottom: var(--sp-xs);
}

.sm-grillas-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
  align-items: center;
}

.sm-grillas-text p {
  color: var(--c-text-muted);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-sm);
}

.sm-content-list {
  margin-top: var(--sp-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sm-content-list li {
  color: var(--c-text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sm-content-list li::before {
  content: '•';
  color: var(--c-primary-bright);
  flex-shrink: 0;
}

/* Laptop mockup slot */
.sm-laptop-slot {
  border-radius: var(--r-xl);
  overflow: hidden;
}

.sm-laptop-slot .img-slot {
  min-height: 280px;
  border-radius: var(--r-xl);
}

/* 1.10 — IMPORTANCIA DEL MANUAL DE MARCA */
.sm-importancia {
  background-color: transparent;
  padding: var(--sp-xl) var(--sp-lg);
  text-align: center;
}

.sm-importancia__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  color: var(--c-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-md);
}

.sm-importancia__text {
  max-width: 820px;
  margin-inline: auto;
  color: var(--c-text-muted);
  line-height: var(--lh-loose);
  font-size: clamp(0.88rem, 1.1vw, 0.98rem);
}

/* ══════════════════════════════
   DISEÑO WEB — diseno-web.php
══════════════════════════════ */

/* 1.2 — Tagline grande */
.web-tagline {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  color: var(--c-white);
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-lg);
}

/* 1.2 — 3 pills de proceso conectados por flechas */
.web-process-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}

.web-process-pill {
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: var(--r-pill);
  padding: 0.65em 1.4em;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--c-white);
  text-align: center;
  white-space: nowrap;
  background: rgba(255,255,255,0.06);
  transition: background var(--t-fast), border-color var(--t-fast);
}

.web-process-pill:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
}

.web-process-arrow {
  color: rgba(255,255,255,0.55);
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

/* 1.3 — Browser mockup + phone overlay */
.web-browser-section {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 0;
  position: relative;
}

.web-phone-slot {
  position: relative;
  z-index: 2;
}

.web-phone-img {
  width: 200%;
  height: 200%;
  min-height: 0px;
  object-fit: cover;
  border-radius: var(--r-xl);
  display: block;
}

.web-browser-mockup {
  background: rgba(10, 10, 20, 0.38);
  border-radius: var(--r-lg);
  border: 2px solid rgba(236,30,50,0.35);
  overflow: hidden;
  margin-left: -40px;
  position: relative;
  z-index: 1;
}

.web-browser-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.web-browser-dots {
  display: flex;
  gap: 6px;
}

.web-browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  display: block;
}

.web-browser-expand {
  color: rgba(255,255,255,0.3);
  font-size: 0.85rem;
}

.web-browser-content {
  padding: 0;
  line-height: 0;
}

.web-browser-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.web-stat-text {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  color: var(--c-white);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-sm);
}

.web-stat-divider {
  height: 2px;
  background: var(--c-primary);
  margin-bottom: var(--sp-sm);
  opacity: 0.8;
}

.web-browser-content p {
  color: var(--c-text-muted);
  line-height: var(--lh-loose);
  font-size: var(--fs-small);
}

.web-browser-content strong {
  color: var(--c-white);
}

/* ─── Web Page Reference (wireframe dentro del browser mockup) ──── */
.web-page-ref {
  background: #0d0d1a;
  font-family: var(--font-body);
  line-height: 1;
}

/* Navbar */
.wpr-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  gap: 12px;
}

.wpr-nav__logo {
  font-size: 0.55rem;
  font-weight: var(--fw-black);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(236,30,50,0.75);
  border-radius: 3px;
  padding: 4px 8px;
  flex-shrink: 0;
}

.wpr-nav__links {
  display: flex;
  gap: 10px;
  flex: 1;
  justify-content: center;
}

.wpr-nav__links span {
  display: block;
  font-size: 0.5rem;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
}

.wpr-nav__cta {
  font-size: 0.5rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(236,30,50,0.6);
  border-radius: 4px;
  padding: 4px 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Hero */
.wpr-hero {
  padding: 20px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wpr-hero__tag {
  display: inline-block;
  font-size: 0.45rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(236,30,50,0.9);
  background: rgba(236,30,50,0.12);
  border: 1px solid rgba(236,30,50,0.3);
  border-radius: 20px;
  padding: 3px 9px;
  width: fit-content;
}

.wpr-hero__title {
  font-size: 0.85rem;
  font-weight: var(--fw-black);
  color: rgba(255,255,255,0.9);
  font-family: var(--font-display);
  line-height: 1.2;
  animation: wpr-pulse 2.4s ease-in-out infinite;
}

.wpr-hero__title--mid {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
}

.wpr-hero__sub {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 2px;
}

.wpr-hero__sub span {
  display: block;
  font-size: 0.45rem;
  color: rgba(255,255,255,0.3);
  line-height: 1.4;
}

.wpr-hero__btns {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.wpr-btn {
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 0.5rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpr-btn--primary {
  background: rgba(236,30,50,0.85);
  color: #fff;
}

.wpr-btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.5);
}

@keyframes wpr-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* Secciones genéricas del wireframe */
.wpr-section {
  padding: 14px 14px 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.wpr-section--dark {
  background: rgba(255,255,255,0.03);
}

.wpr-section--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
}

.wpr-col {
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wpr-col--form {
  background: rgba(255,255,255,0.03);
  border-left: 1px solid rgba(255,255,255,0.06);
}

.wpr-section__label {
  font-size: 0.45rem;
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(236,30,50,0.7);
  margin-bottom: 10px;
}

/* Carrusel / Testimonios */
.wpr-carousel__card {
  background: linear-gradient(135deg, rgba(236,30,50,0.55) 0%, rgba(140,0,0,0.45) 100%);
  border-radius: 6px;
  padding: 10px 12px;
}

.wpr-carousel__quote {
  font-size: 1.4rem;
  font-weight: var(--fw-black);
  color: rgba(255,255,255,0.25);
  line-height: 1;
  margin-bottom: 6px;
}

.wpr-carousel__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.wpr-carousel__text span {
  display: block;
  height: 5px;
  background: rgba(255,255,255,0.35);
  border-radius: 3px;
}

.wpr-carousel__text span:nth-child(1) { width: 95%; }
.wpr-carousel__text span:nth-child(2) { width: 85%; }
.wpr-carousel__text span:nth-child(3) { width: 60%; }

.wpr-carousel__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.15);
}

.wpr-carousel__author strong {
  font-size: 0.5rem;
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,0.9);
}

.wpr-carousel__author em {
  font-size: 0.42rem;
  font-style: normal;
  color: rgba(255,255,255,0.45);
}

.wpr-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
}

.wpr-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: block;
}

.wpr-dot--active {
  background: rgba(236,30,50,0.85);
}

/* Formulario de contacto */
.wpr-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wpr-form__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wpr-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wpr-field__label {
  font-size: 0.42rem;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wpr-field__input {
  height: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
}

.wpr-field__textarea {
  height: 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
}

.wpr-form__submit {
  display: flex;
  justify-content: center;
  padding-top: 2px;
}

/* Footer del wireframe */
.wpr-footer {
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(236,30,50,0.2);
  padding: 10px 14px 8px;
}

.wpr-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.wpr-footer__links {
  display: flex;
  gap: 8px;
}

.wpr-footer__links span {
  font-size: 0.42rem;
  color: rgba(255,255,255,0.35);
}

.wpr-footer__socials {
  display: flex;
  gap: 6px;
  color: rgba(255,255,255,0.3);
  font-size: 0.55rem;
}

.wpr-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 6px;
  text-align: center;
}

.wpr-footer__bottom span {
  font-size: 0.38rem;
  color: rgba(255,255,255,0.2);
}

/* 1.5 — Pill "Tu negocio abierto las 24 horas" */
.web-24h-wrap {
  max-width: 700px;
  margin-inline: auto;
}

.web-24h-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: var(--r-pill);
  padding: var(--sp-md) var(--sp-xl);
  background: rgba(255,255,255,0.04);
}

.web-24h-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
  font-size: 1.5rem;
  flex-shrink: 0;
}

.web-24h-text {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: var(--c-white);
  flex: 1;
}

.web-24h-text strong {
  font-weight: var(--fw-black);
  color: var(--c-white);
}

.web-24h-cursor {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 1.1rem;
  flex-shrink: 0;
  transform: rotate(-45deg);
}

/* 1.6 — "Impulsa tu presencia digital" intro */
.web-features-intro {
  text-align: center;
  margin-bottom: var(--sp-lg);
}

.web-features-intro h2 {
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--c-white);
  line-height: var(--lh-snug);
}

.web-features-intro h2 strong {
  color: var(--c-white);
}

/* 1.6 — 3 cards rojas de características */
.web-feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}

.web-feature-card {
  background: var(--c-primary);
  border-radius: var(--r-xl);
  padding: var(--sp-lg) var(--sp-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  transition: transform var(--t-mid);
}

.web-feature-card:hover { transform: translateY(-4px); }

.web-feature-card__icon {
  font-size: 3rem;
  color: rgba(255,255,255,0.92);
  margin-bottom: var(--sp-xs);
}

/* Tag estilo barra de búsqueda */
.web-feature-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-pill);
  padding: 4px 10px 4px 8px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.03em;
}

.web-feature-card__tag i {
  font-size: 0.7rem;
  opacity: 0.7;
}

.web-feature-card__tag-x {
  color: rgba(255,255,255,0.45);
  font-size: 0.65rem;
  margin-left: 2px;
}

.web-feature-card__desc {
  color: rgba(255,255,255,0.82);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}

/* 1.6 — CTA texto al pie */
.web-cta-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
  align-items: center;
  margin-top: var(--sp-xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid rgba(255,255,255,0.12);
}

.web-cta-bottom__img-wrap {
  border-radius: var(--r-xl);
  overflow: hidden;
}

.web-cta-bottom__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--r-xl);
}

.web-cta-bottom__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-sm);
}

.web-cta-bottom__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  color: var(--c-white);
}

.web-cta-bottom__sub {
  color: var(--c-text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-loose);
}

/* Methodology Steps */
.methodology-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}

.methodology-step {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
  transition: border-color var(--t-mid), transform var(--t-mid);
}

.methodology-step:hover {
  border-color: var(--c-primary);
  transform: translateY(-4px);
}

.methodology-step__num {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 2.2rem;
  color: var(--c-primary-bright);
  opacity: 0.35;
  line-height: 1;
  margin-bottom: var(--sp-xs);
}

.methodology-step__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-white);
  margin-bottom: var(--sp-xs);
}

.methodology-step__desc {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  line-height: var(--lh-normal);
}

/* Image Slot (placeholder hasta poner imagen real) */
.img-slot {
  background: rgba(236,30,50,0.04);
  border: 2px dashed rgba(236,30,50,0.2);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  color: var(--c-text-dim);
  text-align: center;
  padding: var(--sp-md);
  min-height: 240px;
}

.img-slot i {
  font-size: 2rem;
  color: rgba(236,30,50,0.25);
}

.img-slot span {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Project Grid */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}

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

.project-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--c-border);
  transition: border-color var(--t-mid), transform var(--t-mid);
}

.project-card:hover {
  border-color: var(--c-primary);
  transform: scale(1.02);
}

.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.project-card:hover img {
  transform: scale(1.06);
}

/* Service Highlight 3 cols */
.service-highlight--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Content Types (Social Media) */
.content-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}

.content-type-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-sm) var(--sp-md);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  transition: border-color var(--t-fast), background var(--t-fast);
}

.content-type-item:hover {
  border-color: var(--c-primary);
  background: rgba(236,30,50,0.06);
}

.content-type-item i {
  color: var(--c-primary-bright);
  font-size: 1.05rem;
  flex-shrink: 0;
  width: 20px;
}

.content-type-item span {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--c-white);
}

/* Media Grid (detrás de cámaras, grillas) */
.media-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}

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

/* Stat Block (80%) */
.stat-block {
  text-align: center;
  padding: var(--sp-xl);
  background: rgba(236,30,50,0.05);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  margin-block: var(--sp-lg);
}

.stat-block__num {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(4rem, 10vw, 7rem);
  color: var(--c-primary-bright);
  line-height: 1;
  margin-bottom: var(--sp-xs);
}

.stat-block__text {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: var(--c-text-muted);
  max-width: 560px;
  margin-inline: auto;
  line-height: var(--lh-normal);
}

/* Web Features (Diseño Web) */
.web-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}

.web-feature-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
  transition: border-color var(--t-mid), transform var(--t-mid);
}

.web-feature-card:hover {
  border-color: var(--c-primary);
  transform: translateY(-4px);
}

.web-feature-card__icon {
  width: 48px;
  height: 48px;
  background: rgba(236,30,50,0.12);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary-bright);
  font-size: 1.3rem;
  margin-bottom: var(--sp-sm);
}

.web-feature-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-white);
  margin-bottom: var(--sp-xs);
}

.web-feature-card__desc {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  line-height: var(--lh-normal);
}

/* Process Steps (Diseño Web) */
.process-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
  align-items: center;
  padding-block: var(--sp-xl);
}

.process-step__num {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 3.5rem;
  color: var(--c-primary-bright);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: var(--sp-xs);
}

.process-step__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--c-white);
  margin-bottom: var(--sp-xs);
}

.process-step__desc {
  color: var(--c-text-muted);
  line-height: var(--lh-normal);
}

/* ══════════════════════════════
   CONTACTO — contacto.php
══════════════════════════════ */
.contact-info-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
  align-items: center;
  padding-block: var(--sp-xl);
}

.contact-img-wrap {
  position: relative;
}

.contact-img {
  width: 100%;
  border-radius: var(--r-xl);
  object-fit: cover;
  aspect-ratio: 4/3;
}

.contact-map {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--c-border);
}

.contact-map__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.contact-rotating-text {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 110px;
  height: 110px;
}

.contact-rotating-text svg {
  animation: rotate-text 15s linear infinite;
}

.contact-rotating-text svg text {
  fill: var(--c-white);
  stroke: #000;
  stroke-width: 0.3px;
  paint-order: stroke fill;
  font-size: 7.5px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: 3px;
  text-transform: uppercase;
}