/* =============================================================
   SERVICE PAGES — CSS compartido (ROADMAP NUEVO — PUNTO 2)
   Reutiliza tokens/tipografía/botones/reveal/motifs de styles.css.
   Solo se definen aquí los componentes que NO existían ya:
   hero de servicio, FAQ, bloque de servicios relacionados y un
   par de utilidades. Todo lo demás (kicker, section-title,
   section-text, flow-list, gbiz-points, ia-case*, btn*, reveal)
   se reutiliza tal cual desde styles.css.
   ============================================================= */

/* ---------- Hero de servicio ---------- */
.svc-hero {
  position: relative; overflow: clip; background: var(--bg);
  padding-top: clamp(7.5rem, 14vw, 10.5rem); padding-bottom: clamp(4rem, 8vw, 6rem);
}
.svc-hero-dark { background: var(--ink); color: var(--cream); }
.svc-hero-dark .section-text, .svc-hero-dark .svc-lead { color: var(--cream-mute); }
.svc-hero-inner { position: relative; z-index: 1; max-width: 46rem; }
.svc-breadcrumb {
  display: flex; align-items: center; gap: .5rem; margin-bottom: 1.4rem;
  font-family: var(--font-mono); font-size: .74rem; color: var(--mute);
}
.svc-hero-dark .svc-breadcrumb { color: var(--cream-mute); }
.svc-breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.svc-hero-title { font-size: clamp(2.4rem, 6vw, 4.4rem); margin: .6rem 0 1.2rem; }
.svc-lead { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem, 2.2vw, 1.4rem); color: var(--ink-soft); margin-bottom: 1rem; max-width: 42ch; }
.svc-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
@media (max-width: 640px) { .svc-hero-actions { flex-direction: column; align-items: stretch; } .svc-hero-actions .btn { justify-content: center; } }

/* ---------- Secciones genéricas de contenido ---------- */
.svc-section { position: relative; overflow: clip; padding-block: clamp(3.5rem, 7vw, 6rem); }
.svc-section-soft { background: var(--bg-soft); }
.svc-section-dark { background: var(--ink); color: var(--cream); }
.svc-section-dark .section-text { color: var(--cream-mute); }
.svc-grid-2 { display: grid; gap: clamp(2.5rem, 6vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .svc-grid-2 { grid-template-columns: 1fr 1fr; align-items: center; } }
.svc-grid-2-wide { grid-template-columns: 1fr; }
@media (min-width: 960px) { .svc-grid-2-wide { grid-template-columns: 1.15fr .85fr; } }

/* ---------- Nota / disclaimer editorial ---------- */
.svc-note {
  margin-top: 1.6rem; padding: 1rem 1.2rem; border-radius: var(--radius-sm);
  background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line);
  font-size: .88rem; color: var(--ink-soft); line-height: 1.6; max-width: 60ch;
}
.svc-section-dark .svc-note { background: rgba(242,235,224,.06); box-shadow: inset 0 0 0 1px var(--ink-line); color: var(--cream-mute); }
.svc-note strong { color: var(--ink); font-family: var(--font-display); }
.svc-section-dark .svc-note strong { color: var(--cream); }

/* ---------- FAQ (details/summary nativo: accesible sin JS) ---------- */
.svc-faq-list { display: flex; flex-direction: column; margin-top: clamp(2rem, 4vw, 3rem); max-width: 52rem; }
.svc-faq-item { border-bottom: 1px solid var(--line); }
.svc-section-dark .svc-faq-item { border-color: var(--ink-line); }
.svc-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
}
.svc-faq-item summary::-webkit-details-marker { display: none; }
.svc-faq-item summary::after {
  content: "+"; font-family: var(--font-mono); font-size: 1.3rem; font-weight: 400; color: var(--accent-dim); flex-shrink: 0;
  transition: transform .3s var(--ease-out);
}
.svc-faq-item[open] summary::after { transform: rotate(45deg); }
.svc-faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.svc-faq-item p { padding-bottom: 1.3rem; margin: 0; max-width: 60ch; color: var(--ink-soft); line-height: 1.7; }
.svc-section-dark .svc-faq-item p { color: var(--cream-mute); }

/* ---------- Servicios relacionados ---------- */
.svc-related-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 720px) { .svc-related-grid { grid-template-columns: 1fr 1fr; } }
.svc-related-card {
  display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem 1.6rem; border-radius: var(--radius-sm);
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.svc-related-card:hover, .svc-related-card:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--ink); }
.svc-related-eyebrow { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-dim); }
.svc-related-card h4 { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; }
.svc-related-card p { font-size: .88rem; color: var(--mute); line-height: 1.55; margin: 0; }
.svc-related-card .svc-related-arrow { font-family: var(--font-mono); font-size: .8rem; color: var(--ink); margin-top: .3rem; }

/* ---------- CTA final de servicio ---------- */
.svc-cta-final { position: relative; overflow: clip; background: var(--ink); color: var(--cream); padding-block: clamp(4rem, 8vw, 6.5rem); text-align: center; }
.svc-cta-final .section-title { max-width: 22ch; margin-inline: auto; }
.svc-cta-final-text { color: var(--cream-mute); max-width: 42ch; margin: 1rem auto 2rem; }
.svc-cta-final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.svc-cta-final .btn-ghost { color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--ink-line); }
.svc-cta-final .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--cream); }

/* ---------- Lista de pasos numerada compacta (variante ligera de flow-list) ---------- */
.svc-steps { display: flex; flex-direction: column; gap: 0; margin-top: clamp(2rem, 4vw, 3rem); max-width: 46rem; }
.svc-step { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; padding-block: 1.1rem; border-top: 1px solid var(--line); }
.svc-section-dark .svc-step { border-color: var(--ink-line); }
.svc-step:last-child { border-bottom: 1px solid var(--line); }
.svc-section-dark .svc-step:last-child { border-color: var(--ink-line); }
.svc-step-num { font-family: var(--font-mono); font-size: .85rem; color: var(--accent-dim); font-weight: 700; }
.svc-step h4 { font-family: var(--font-display); font-weight: 800; font-size: 1rem; text-transform: uppercase; margin-bottom: .3rem; }
.svc-step p { margin: 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.6; }
.svc-section-dark .svc-step p { color: var(--cream-mute); }

@media (prefers-reduced-motion: reduce) {
  .svc-faq-item summary::after, .svc-related-card { transition: none; }
}

/* =============================================================
   MICROFASE FINAL DE REMATE — correcciones tras revisión visual
   ============================================================= */

/* ---------- 1. CTA primario sobre fondo oscuro ----------
   .btn-primary (styles.css) usa background: var(--ink); sobre una
   sección ya Carbón ese fondo se funde con la sección y solo queda
   visible el texto. Mismo patrón ya validado en el sitio para este
   caso exacto (.webs-section .btn-primary): Borgoña fija #77252D +
   texto Marfil (8.50:1, AA+). Se aplica aquí de forma global a los
   tres contextos oscuros de las páginas de servicio, sin tocar
   ningún otro .btn-primary del sitio. */
.svc-hero-dark .btn-primary,
.svc-section-dark .btn-primary,
.svc-cta-final .btn-primary {
  background: #77252D;
  color: var(--cream);
}
.svc-hero-dark .btn-primary:hover,
.svc-section-dark .btn-primary:hover,
.svc-cta-final .btn-primary:hover {
  box-shadow: 0 22px 45px rgba(0,0,0,.35), 0 10px 20px rgba(119,37,45,.35);
}

/* ---------- 1b. Botón ghost sobre hero oscuro ----------
   .btn-ghost (styles.css) usa color: var(--ink) — invisible sobre
   .svc-hero-dark (texto casi negro sobre fondo casi negro). Detectado
   en /posicionamiento-local/ y también presente, sin corregir hasta
   ahora, en /resenas-google/. Mismo tratamiento ya usado en
   .svc-cta-final .btn-ghost, aplicado aquí a .svc-hero-dark. */
.svc-hero-dark .btn-ghost {
  color: var(--cream);
  box-shadow: inset 0 0 0 1.5px var(--ink-line);
}
.svc-hero-dark .btn-ghost:hover {
  box-shadow: inset 0 0 0 1.5px var(--cream);
}

/* ---------- 2. Aviso compacto (banner, no sección enorme) ---------- */
.svc-section-tight { padding-block: clamp(1.4rem, 2.6vw, 2rem); }
.svc-note-compact { padding: .9rem 1.2rem; }
.svc-note-tag {
  display: inline-block; font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dim);
  font-weight: 700; margin-right: .6rem;
}

/* ---------- 3. Composición editorial de proceso (Google Business) ---------- */
.svc-process-visual { display: flex; flex-direction: column; }
.svc-process-label { display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dim); margin-bottom: 1.6rem; }
.svc-process-track { position: relative; display: flex; flex-direction: column; gap: clamp(1.4rem, 3vw, 2rem); padding-left: 2.2rem; }
.svc-process-track::before { content: ""; position: absolute; left: .3rem; top: .5rem; bottom: .5rem; width: 1px; background: var(--line); }
.svc-process-item { position: relative; display: flex; align-items: baseline; gap: 1rem; }
.svc-process-item::before { content: ""; position: absolute; left: -2.2rem; top: .5rem; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1.5px var(--accent-dim); }
.svc-process-num { font-family: var(--font-mono); font-size: .78rem; color: var(--accent-dim); font-weight: 700; }
.svc-process-word { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--ink); line-height: 1.15; }
@media (min-width: 960px) {
  .svc-process-visual { padding-left: 2.2rem; border-left: 1px solid var(--line); }
}

/* ---------- 4. Hero con composición de producto (NFC) ---------- */
.svc-hero-split .container { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
/* .svc-hero-split solo se usa en /tarjetas-nfc-resenas/. La columna de
   texto (1.1fr ≈ 629px en 1366px de ancho) era demasiado estrecha: el
   lead y el párrafo secundario partían en más líneas de las necesarias
   y empujaban el CTA fuera de la primera pantalla en 1366×768. Se amplía
   la proporción de texto — mismo grid, mismos dos elementos, sin tocar
   tamaño de letra ni estructura — para que ese texto necesite menos
   líneas y ocupe menos alto. */
@media (min-width: 960px) { .svc-hero-split .container { grid-template-columns: 1.35fr .65fr; } }
.svc-hero-split .svc-hero-inner { max-width: 100%; }
/* Aun así, en pantallas anchas pero bajas (portátiles 1366×768) seguía
   sobrando por poco (~12px). Mismo patrón ya usado en Agentes IA y
   Diseño Web: compacta solo el padding-top del hero en viewports de
   poca altura, sin tocar tamaños de letra ni el resto de breakpoints
   (en 1920×1080 y en móvil esta regla no aplica). */
@media (min-width: 641px) and (max-height: 780px) {
  .svc-hero-split { padding-top: clamp(5.5rem, 9vw, 7.5rem); }
}
.svc-hero-product { position: relative; display: flex; flex-direction: column; align-items: center; padding: 1.5rem 0 1rem; gap: 1.1rem; }
.svc-hero-product-visual { position: relative; display: flex; justify-content: center; align-items: center; }
.svc-hero-product-caption {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute);
}
.svc-hero-card {
  width: min(280px, 78%); border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(29,29,29,.18), 0 10px 24px rgba(29,29,29,.12);
  transform: rotate(-6deg); background: var(--bg);
}
.svc-hero-card img { display: block; width: 100%; height: auto; }
.svc-hero-phone {
  position: absolute; right: 2%; bottom: -4%; width: min(210px, 48%); aspect-ratio: 9/18.5;
  background: var(--ink); border-radius: 24px; box-shadow: 0 24px 50px rgba(29,29,29,.28);
  transform: rotate(8deg); padding: 6%;
  display: flex; align-items: center; justify-content: center;
}
.svc-hero-phone-screen {
  width: 100%; height: 100%; border-radius: 15px; background: var(--bg); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9%; padding: 8%; text-align: center;
}
.svc-hero-phone-biz { font-family: var(--font-display); font-weight: 800; font-size: clamp(13px, 4.4vw, 16px); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.svc-hero-phone-prompt { font-family: var(--font-serif); font-style: italic; font-size: clamp(11px, 3.6vw, 13px); color: var(--ink-soft); }
.svc-hero-phone-stars { display: flex; gap: 5%; }
.svc-hero-phone-stars svg { width: clamp(18px, 6vw, 24px); height: clamp(18px, 6vw, 24px); fill: none; stroke: var(--brand-yellow); stroke-width: 1.3; stroke-linejoin: round; }
.svc-hero-phone-tap {
  position: absolute; left: 50%; top: -3%; width: 22px; height: 22px; margin-left: -11px;
  border-radius: 50%; box-shadow: 0 0 0 1px rgba(29,29,29,.35);
}
.svc-hero-phone-tap::before, .svc-hero-phone-tap::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgba(29,29,29,.3);
  animation: svc-tap-ring 2.4s var(--ease-out) infinite;
}
.svc-hero-phone-tap::after { animation-delay: 1.2s; }
@keyframes svc-tap-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .svc-hero-phone-tap::before, .svc-hero-phone-tap::after { animation: none; } }
.svc-nfc-card-img { width: 100%; height: auto; display: block; border-radius: 10px; margin-bottom: 1rem; box-shadow: 0 12px 28px rgba(29,29,29,.14); }

/* ---------- 5. Comparativa de señales (Posicionamiento local) ---------- */
.svc-signal-compare { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 720px) { .svc-signal-compare { grid-template-columns: repeat(3, 1fr); } }
.svc-signal-col { padding: 1.4rem 1.5rem; border-radius: var(--radius-sm); background: rgba(242,235,224,.04); box-shadow: inset 0 0 0 1px var(--ink-line); }
.svc-signal-col-win { background: rgba(242,235,224,.08); box-shadow: inset 0 0 0 1.5px var(--cream); }
.svc-signal-name { display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: .88rem; color: var(--cream); margin-bottom: .9rem; }
.svc-signal-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-block: .5rem; border-top: 1px solid var(--ink-line); font-size: .85rem; color: var(--cream-mute); }
.svc-signal-row:first-of-type { border-top: none; }
.svc-signal-mark { font-family: var(--font-mono); font-weight: 700; }
.svc-signal-ok { color: var(--cream); }
.svc-signal-no { color: var(--cream-mute); opacity: .45; }
.svc-signal-partial { color: var(--cream-mute); }
.svc-signal-col-win .svc-signal-ok { color: var(--accent); }
.svc-signal-caption { margin-top: 1.2rem; font-size: .8rem; color: var(--cream-mute); font-style: italic; max-width: 60ch; }

/* ---------- 6. CTA sobre la fotografía real (Tour 360) ---------- */
.svc-hero-photo-cta {
  position: absolute; right: 1.5rem; bottom: 1.2rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.2rem; border-radius: 999px; background: #77252D; color: var(--cream);
  font-family: var(--font-display); font-weight: 700; font-size: .85rem;
  text-decoration: none; box-shadow: 0 14px 30px rgba(0,0,0,.35);
  transition: transform .3s var(--ease-out);
}
.svc-hero-photo-cta svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.svc-hero-photo-cta:hover { transform: translateY(-3px); }
@media (max-width: 640px) {
  .svc-hero-photo-cta { right: 1.2rem; bottom: 3.6rem; padding: .6rem 1rem; font-size: .76rem; }
}

/* ---------- 7. Mock móvil complementario al showcase AURA (Diseño web) ----------
   Colores fijos a propósito, igual que el resto del showcase AURA:
   representa el sitio de OTRO negocio, no hereda --accent de la página. */
.svc-web-showcase-wrap { position: relative; }
.svc-web-mobile {
  position: absolute; right: -1rem; bottom: -1.2rem; width: 118px;
  background: var(--ink); border-radius: 16px; padding: .9rem .75rem 1rem;
  box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 0 6px var(--bg);
  transform: rotate(4deg);
}
.svc-web-mobile-notch { width: 28px; height: 4px; border-radius: 3px; background: rgba(242,235,224,.25); margin: 0 auto .7rem; }
.svc-web-mobile-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.svc-web-mobile-nav > span:first-child { font-family: var(--font-display); font-weight: 800; font-size: .6rem; letter-spacing: .05em; color: var(--cream); text-transform: uppercase; }
.svc-web-mobile-dot { display: flex; flex-direction: column; gap: 2px; }
.svc-web-mobile-dot span { width: 10px; height: 1.5px; background: rgba(242,235,224,.4); display: block; }
.svc-web-mobile-hero {
  display: flex; flex-direction: column; gap: .4rem; margin-bottom: .8rem;
  position: relative; border-radius: 10px; overflow: hidden;
  padding: .6rem .55rem .55rem;
  background-image: linear-gradient(180deg, rgba(29,29,29,.12) 0%, rgba(29,29,29,.85) 100%), url("assets/img/aura-showcase-salon.webp");
  background-size: cover; background-position: center;
}
.svc-web-mobile-kicker { font-family: var(--font-mono); font-size: .52rem; color: #C17179; text-transform: uppercase; letter-spacing: .04em; }
.svc-web-mobile-title { font-family: var(--font-serif); font-style: italic; font-size: .82rem; line-height: 1.25; color: var(--cream); }
.svc-web-mobile-cta { display: inline-block; margin-top: .3rem; padding: .35rem .6rem; border-radius: 999px; background: #77252D; color: var(--cream); font-size: .55rem; font-weight: 700; text-align: center; width: fit-content; }
@media (max-width: 640px) { .svc-web-mobile { display: none; } }

/* ---------- 7b. Foto protagonista del showcase AURA (solo /diseno-web-negocios-locales/) ----------
   Sustituye el círculo decorativo (gradiente + mirror SVG) del mock de
   escritorio por una fotografía real de un espacio de estudio de belleza,
   para que el ejemplo comunique calidad visual real. Licencia Unsplash
   (uso libre) — foto de Barney Goodman, unsplash.com/photos/_Fy7Kq0w6OI. */
.webshow-hero-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =============================================================
   URL 02/07 — RESEÑAS GOOGLE — correcciones tras revisión visual
   ============================================================= */

/* ---------- 8. WhatsApp del header con acento Borgoña (solo /resenas-google/) ----------
   .nav-whatsapp por defecto usa background: var(--bg-soft) (claro) en
   cualquier estado del header; sobre header oscuro esto se ve como un
   círculo pálido fuera de lugar. Clase específica de esta página: círculo
   Borgoña fijo + icono Marfil, legible igual sobre header claro u oscuro. */
.nav-whatsapp.svc-nav-whatsapp-accent { background: #77252D; }
.nav-whatsapp.svc-nav-whatsapp-accent svg { fill: var(--cream); }
.nav-whatsapp.svc-nav-whatsapp-accent:hover { background: var(--accent-dim); }

/* ---------- 9. Estrategia de reseñas — composición editorial 3+2 (solo /resenas-google/) ----------
   Sustituye la lista vertical .svc-steps por una cuadrícula que ocupa
   todo el ancho: 3 elementos arriba + 2 abajo, cada fila al 100%. */
.svc-strategy-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2.2rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); }
.svc-strategy-item { grid-column: span 6; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.svc-strategy-num { display: block; font-family: var(--font-mono); font-size: .78rem; color: var(--accent-dim); font-weight: 700; margin-bottom: .6rem; }
.svc-strategy-item h4 { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; margin-bottom: .5rem; }
.svc-strategy-item p { font-size: .92rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }
@media (min-width: 960px) {
  .svc-strategy-item:nth-child(-n+3) { grid-column: span 2; }
  .svc-strategy-item:nth-child(n+4) { grid-column: span 3; }
}

/* ---------- 10. Foto de formato de producto (placa cuadrada, solo /tarjetas-nfc-resenas/) ---------- */
.svc-format-photo { border-radius: 14px; overflow: hidden; box-shadow: 0 20px 45px rgba(29,29,29,.16); }
.svc-format-photo img { display: block; width: 100%; height: auto; }

/* ---------- 11. Hero compacto (solo /agentes-ia-negocios-locales/) ----------
   Este hero lleva más texto (kicker + H1 + lead + párrafo) que el resto de
   páginas de servicio; en 1920×1080 y sobre todo en 1366×768 el CTA quedaba
   fuera de la primera pantalla. Reduce paddings, tamaños y márgenes SOLO en
   tablet/escritorio (≥641px) y SOLO en esta página — el móvil no se toca,
   sigue usando los valores compartidos de .svc-hero. */
/* El H1 y el lead mantienen el mismo tamaño que en el resto de heroes de
   servicio (misma jerarquía visual) — solo se ajusta el ritmo vertical
   (paddings y márgenes) para que quepan junto al CTA en la primera
   pantalla. El párrafo secundario que antes iba aquí se trasladó a la
   nota "Un agente a tu medida" de la siguiente sección. */
@media (min-width: 641px) {
  .agia-hero { padding-top: clamp(5rem, 8vw, 6.5rem); padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
  /* .svc-hero-inner comparte elemento con .container y añade
     max-width:46rem; ese ancho menor, combinado con el margin-inline:auto
     de .container, centraba el bloque de texto dentro del contenedor
     ancho en vez de arrancar en el mismo borde que "Así se ve en la
     práctica" (hijas directas de .container, sin max-width propio).
     El lead ya limita su propio ancho con max-width:42ch y el H1 usa
     salto de línea manual, así que basta con quitar el max-width del
     contenedor: vuelve a centrarse exactamente como .container solo. */
  .agia-hero .svc-hero-inner { max-width: var(--container-w); }
  .agia-hero .svc-breadcrumb { margin-bottom: 1rem; }
  .agia-hero .svc-hero-title { margin: .4rem 0 .9rem; }
  .agia-hero .svc-lead { margin-bottom: 0; }
  .agia-hero .svc-hero-actions { margin-top: 1.3rem; }
}
/* Pantallas anchas pero de poca altura (portátiles 1366×768 con barras del
   navegador, etc.): compacta un poco más el ritmo vertical, sin tocar
   tamaños de letra, para garantizar que el CTA quede siempre visible. */
@media (min-width: 641px) and (max-height: 780px) {
  .agia-hero { padding-top: clamp(4.25rem, 6vw, 5.25rem); padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
  .agia-hero .svc-breadcrumb { margin-bottom: .7rem; }
  .agia-hero .svc-hero-title { margin: .3rem 0 .7rem; }
  .agia-hero .svc-hero-actions { margin-top: 1rem; }
}

/* ---------- 12. Alineación del hero (solo /diseno-web-negocios-locales/) ----------
   Mismo problema y misma solución que en Agentes IA (bloque 11): .svc-hero-inner
   comparte elemento con .container y su max-width:46rem, combinado con el
   margin-inline:auto de .container, centraba el titular/CTA en vez de
   arrancar en el mismo borde que "Qué incluye" y el resto de secciones.
   El lead ya no necesita ese ancho — es un único párrafo corto — así que
   se iguala al ancho real de .container. */
@media (min-width: 641px) {
  .dw-hero .svc-hero-inner { max-width: var(--container-w); }
  .dw-hero .svc-breadcrumb { margin-bottom: 1rem; }
  .dw-hero .svc-hero-title { margin: .4rem 0 .9rem; }
  .dw-hero .svc-hero-actions { margin-top: 1.3rem; }
}
@media (min-width: 641px) and (max-height: 780px) {
  .dw-hero { padding-top: clamp(4.5rem, 6vw, 5.5rem); padding-bottom: clamp(1.5rem, 3vw, 2rem); }
  .dw-hero .svc-breadcrumb { margin-bottom: .7rem; }
  .dw-hero .svc-hero-title { margin: .3rem 0 .7rem; }
  .dw-hero .svc-hero-actions { margin-top: 1rem; }
}

/* ---------- 13. Alineación del hero (solo /tour-virtual-360/) ----------
   Mismo problema que en Agentes IA y Diseño Web (bloques 11 y 12):
   .svc-hero-inner comparte elemento con .container y su max-width:46rem,
   combinado con el margin-inline:auto de .container, centraba el bloque
   de texto en vez de arrancar en el mismo borde que "Qué es" y el resto
   de secciones. El lead ya limita su propio ancho con max-width:42ch. */
@media (min-width: 641px) {
  .tv-hero .svc-hero-inner { max-width: var(--container-w); }
}

/* ---------- 14. Dos casos reales con foto (solo /tour-virtual-360/) ----------
   Antes solo se mostraba el enlace de Hache Ungles en texto. Se añade El
   Salón de Blanca reutilizando su fotografía y enlace reales ya publicados
   en Home (mismas URL, sin descargar ni tocar nada de Home). Aspect-ratio
   4:5 (el nativo de la foto de Blanca) recorta con cover ambas fotos de
   forma consistente, igual que ya hace Home con las mismas imágenes. */
.tv-cases-grid { display: grid; grid-template-columns: 1fr; gap: 2.4rem; margin-top: 2rem; }
@media (min-width: 720px) { .tv-cases-grid { grid-template-columns: 1fr 1fr; } }
.tv-case-photo {
  position: relative; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden;
  background-size: cover; background-position: center;
  box-shadow: 0 20px 45px rgba(29,29,29,.16);
  margin-bottom: 1rem;
}
.tv-case-photo-blanca { background-position: center 22%; }
.tv-case-tag {
  position: absolute; left: .9rem; bottom: .9rem; z-index: 1;
  font-family: var(--font-mono); font-size: .68rem; color: var(--cream);
  background: rgba(29,29,29,.6); padding: .4rem .7rem; border-radius: 20px;
}
.tv-case-name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; margin-bottom: .2rem; }
.tv-case-meta { font-family: var(--font-mono); font-size: .82rem; color: var(--mute); margin-bottom: .8rem; }

/* ---------- 15. Alineación del hero (solo /posicionamiento-local/) ----------
   Mismo problema que en Agentes IA, Diseño Web y Tour Virtual 360 (bloques
   11, 12 y 13): .svc-hero-inner comparte elemento con .container y su
   max-width:46rem, combinado con el margin-inline:auto de .container,
   centraba el bloque de texto en vez de arrancar en el mismo borde que
   "El ecosistema, no un solo punto" y el resto de secciones. El lead ya
   limita su propio ancho con max-width:42ch. */
@media (min-width: 641px) {
  .pl-hero .svc-hero-inner { max-width: var(--container-w); }
}

/* ---------- 16. Alineación del hero (solo /resenas-google/) ----------
   Mismo problema que en Agentes IA, Diseño Web, Tour Virtual 360 y
   Posicionamiento Local (bloques 11-13 y 15): .svc-hero-inner comparte
   elemento con .container y su max-width:46rem, combinado con el
   margin-inline:auto de .container, centraba el bloque de texto en vez
   de arrancar en el mismo borde que "Una estrategia, no un truco
   puntual" y el resto de secciones. El lead ya limita su propio ancho
   con max-width:42ch. */
@media (min-width: 641px) {
  .rg-hero .svc-hero-inner { max-width: var(--container-w); }
}
/* El hero oscuro de esta página lleva además el aviso "No vendemos
   reseñas falsas" justo debajo (fuera del hero, pero pegado), y el
   párrafo del hero es más largo que en otras páginas: en 1366×768 el
   CTA quedaba fuera de la primera pantalla. Mismo patrón ya usado en
   Agentes IA, Diseño Web y Tarjetas NFC: compacta solo el ritmo
   vertical del hero en pantallas bajas, sin tocar tamaños de letra ni
   el resto de breakpoints. */
@media (min-width: 641px) and (max-height: 780px) {
  .rg-hero { padding-top: clamp(5.5rem, 9vw, 7.5rem); padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
  .rg-hero .svc-breadcrumb { margin-bottom: .7rem; }
  .rg-hero .svc-hero-title { margin: .3rem 0 .7rem; }
  .rg-hero .svc-lead { margin-bottom: .6rem; }
  .rg-hero .svc-hero-actions { margin-top: 1rem; }
}

/* ---------- 17. Alineación del hero (solo /gestion-google-business/) ----------
   Mismo problema que en Agentes IA, Diseño Web, Tour Virtual 360,
   Posicionamiento Local y Reseñas de Google (bloques 11-13, 15 y 16):
   .svc-hero-inner comparte elemento con .container y su max-width:46rem,
   combinado con el margin-inline:auto de .container, centraba el bloque
   de texto en vez de arrancar en el mismo borde que "Muchas fichas están
   a medio hacer" y el resto de secciones. El lead ya limita su propio
   ancho con max-width:42ch. */
@media (min-width: 641px) {
  .ggb-hero .svc-hero-inner { max-width: var(--container-w); }
}
/* Este hero tiene lead + párrafo + dos CTA: en 1366×768 el CTA quedaba
   fuera de la primera pantalla. Mismo patrón ya usado en Agentes IA,
   Diseño Web, Tarjetas NFC y Reseñas de Google: compacta solo el ritmo
   vertical del hero en pantallas bajas, sin tocar tamaños de letra ni
   el resto de breakpoints. */
@media (min-width: 641px) and (max-height: 780px) {
  .ggb-hero { padding-top: clamp(5.5rem, 9vw, 7.5rem); padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
  .ggb-hero .svc-breadcrumb { margin-bottom: .7rem; }
  .ggb-hero .svc-hero-title { margin: .3rem 0 .7rem; }
  .ggb-hero .svc-lead { margin-bottom: .6rem; }
  .ggb-hero .section-text { margin-bottom: .8rem; }
  .ggb-hero .svc-hero-actions { margin-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-hero-photo-cta { transition: none; }
}