/* guia-servicio.css
 * Candidato A7 (11-nov-2026) sobre la base de A3.
 * Base A3 (no se sobrescribe su fichero): ver css/SHA256.txt
 *   (guia-servicio.BASE-A3.css).
 *
 * Hoja de preview-guia-servicio.phtml y, con selectores acotados, de los
 * otros dos tipos del lote mientras existan: posts (single-post) y glosario
 * (cronuts-glossary-entry). No se encola en todo el sitio.
 *
 * Causa: .cta-inline / .cta-inline__link no existen en el tema ni en los
 * mu-plugins. El HTML del grupo Gutenberg esta completo (H3 + parrafo +
 * enlace) y se ve como un titular huerfano. Este CSS la convierte en
 * tarjeta + boton en los 3 tipos, tambien dentro de .section--dark, y da
 * caja al .post-toc editorial del cuerpo (no al aside del blog).
 *
 * Contraste del boton: #df1f3a sobre blanco (el rojo del header), no #e6243f,
 * para pasar AA a 14 px segun la medicion de A7 (11-nov-2026).
 *
 * SLOT-A7 en esta hoja: hero CTA, sticky movil, firma y cierre.
 * El bloque GEO inyectado queda fuera de esta hoja (dominio A4).
 * El carrusel de resenas no se toca.
 *
 * v2 (11-nov-2026, Europe/Madrid), sobre v1 3d2b946e (guardada como
 * guia-servicio.v1-3d2b946e.css). P0 contraste de p.section__lead y
 * P2 tipografia/ritmo a la altura de /outbound-b2b/. No se cambia
 * el texto ni los H1/H2. Iconos solo con CSS (sin assets nuevos).
 */


/* ==========================================================================
   1. Cascaron money page / guia-servicio (RevOps y, si A3 unifica, las 5)
   ========================================================================== */

/* Lienzo claro como el vivo / outbound (#E0E5EC). Sin esto, main.css
   deja body en --color-black y las secciones no oscuras se leen sobre
   #121212 (la maqueta de A3, 11-nov-2026). Solo RevOps / guia-servicio;
   no se pinta el lienzo en posts ni glosarios. */
:is(.guia-servicio, .page-id-74959) {
  background: #E0E5EC;
  color: #242424;
}

.guia-servicio .hero {
  /* Mismo token que outbound / main.css, no #0A0A0A */
  background: var(--color-black, #121212);
  color: var(--color-white, #fff);
  padding-block: clamp(5rem, 10vw, 10rem);
  position: relative;
  overflow: hidden;
}

.guia-servicio .hero__inner {
  /* Sin max-width: 880px — el grid .obm-hero (2 columnas a >=1100px)
     necesita el container de 1200px, como en outbound. */
  position: relative;
  z-index: 2;
}

.guia-servicio .hero__eyebrow {
  font-family: var(--font-display, Poppins, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff8a9b;
  margin: 0 0 20px;
}

/* Misma escala que main.css .hero__title (medido en outbound a 1440:
   86,4px / 800; a 375: 36px / 800). Se anula el tope v1 de 64/700 y
   el media 1099px que dejaba 31,2px en 390. No se fuerza max-width
   18ch: el H1 de RevOps es mas largo y no se reescribe. */
.guia-servicio .hero__title,
:is(.guia-servicio, .page-id-74959) h1.hero__title {
  font-family: var(--font-display, Poppins, sans-serif);
  font-size: clamp(2.25rem, 6vw, 5.5rem);
  font-weight: var(--weight-heavy, 800);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 var(--space-6, 1.5rem);
}

.guia-servicio .hero__lead {
  font-size: var(--text-xl, 1.25rem);
  line-height: var(--leading-relaxed, 1.65);
  /* Mismo tratamiento que el lead de seccion oscura en el vivo
     (outbound): rgba(255,255,255,.72) sobre #121212 = 9,97:1. */
  color: rgba(255, 255, 255, 0.72);
  max-width: 54ch;
  margin: 0 0 28px;
}

.guia-servicio .hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
}

.guia-servicio .hero__author {
  margin: 24px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}

/* Ritmo de secciones: los mismos tokens que outbound / main.css. */
:is(.guia-servicio, .page-id-74959) .section {
  padding-block: var(--section-py, clamp(4rem, 8vw, 8rem));
}

:is(.guia-servicio, .page-id-74959) .section--tight {
  padding-block: clamp(2rem, 4vw, 4rem);
}

:is(.guia-servicio, .page-id-74959) .section--dark,
:is(.guia-servicio, .page-id-74959) .guia-servicio__close {
  background: var(--color-black, #121212);
  color: var(--color-white, #fff);
}

/* En outbound #empezar.cta-dark tiene padding 100px y fondo #0a0a0a.
   En la maqueta v1 llegaba a 0 y fondo transparente. */
:is(.guia-servicio, .page-id-74959) .cta-dark {
  background: #0a0a0a;
  color: var(--color-white, #fff);
  padding-block: 100px;
}

/* P0 — p.section__lead, AA en claro y en oscuro.
   En el vivo, la hoja de contraste de cronuts pinta
   .section .section__lead en #545760 y .section--dark .section__lead
   en rgba(255,255,255,.72). Ese par es de la paleta ya usada.
   El color unico de main.css (--color-gray-400, #a0a0a0) pasa 7,16:1
   sobre #121212 y falla sobre el lienzo #E0E5EC (2,07:1) y sobre
   blanco (2,61:1). Medido 11-nov-2026 en maqueta, vivo y outbound.
   El selector no exige ancestro .section: en el vivo de RevOps el
   lead puede aparecer fuera de ese cascaron. */
:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) p.section__lead {
  color: #545760; /* 5,70:1 sobre #E0E5EC; 7,22:1 sobre blanco */
}

:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) :is(.hero, .section--dark, .cta-dark, .guia-servicio__close) p.section__lead {
  color: rgba(255, 255, 255, 0.72); /* 9,97:1 sobre #121212 */
}

/* Iconografia solo CSS (el + del acordeon de outbound). Sin SVG
   ni ficheros nuevos. Si A3 quiere lucide en chips o en el hueco
   de ilustracion, el marcado se pide aparte; esta hoja no lo exige. */
:is(.guia-servicio, .page-id-74959) .faq__q,
:is(.guia-servicio, .page-id-74959) .obm-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

:is(.guia-servicio, .page-id-74959) .faq__q::-webkit-details-marker,
:is(.guia-servicio, .page-id-74959) .obm-faq__q::-webkit-details-marker {
  display: none;
}

:is(.guia-servicio, .page-id-74959) .faq__q::after,
:is(.guia-servicio, .page-id-74959) .obm-faq__q::after {
  content: "+";
  flex: none;
  font-family: var(--font-display, Poppins, sans-serif);
  font-weight: 600;
  font-size: 1.25em;
  line-height: 1;
  color: var(--cd-red-hover, #c71c33);
}

:is(.guia-servicio, .page-id-74959) details[open] > .faq__q::after,
:is(.guia-servicio, .page-id-74959) details[open] > .obm-faq__q::after {
  content: "\2212"; /* minus, no un asset */
}

/* Cuerpo largo: el post_content, sin partir por H2. */
.guia-servicio__main {
  padding: 56px 0 72px;
}

.guia-servicio__article {
  max-width: 760px;
}

.guia-servicio__article :is(h2, h3) {
  font-family: var(--font-display, Poppins, sans-serif);
  letter-spacing: -0.02em;
  color: inherit;
}

.guia-servicio__article h2 {
  font-size: clamp(26px, 3vw, 32px);
  margin: 2.2em 0 0.6em;
}

.guia-servicio__article h3 {
  font-size: 22px;
  margin: 1.6em 0 0.5em;
}

.guia-servicio__article > :first-child { margin-top: 0; }

.guia-servicio__article :is(p, li) {
  font-size: 17px;
  line-height: 1.65;
}

.guia-servicio__article a {
  color: #b0152c;
}

.guia-servicio__article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  display: block;
  overflow-x: auto;
}

.guia-servicio__article th,
.guia-servicio__article td {
  border: 1px solid rgba(36, 36, 36, 0.14);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

/* ==========================================================================
   2. .cta-inline — tarjeta + boton en los 3 tipos
      Alcance: .guia-servicio y las clases de las 5 paginas (.page-id-74959,
      .page-id-70578, .page-id-74957, .postid-74954, .postid-74961).
      En el vivo, single-post deja body sin clases; A3 debe mantener o restaurar
      postid-74954 y postid-74961 al encolar esta hoja en esos posts.
      La caja de .post-toc solo con :not(:has(.post-toc__cta)).
   ========================================================================== */

:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .cta-inline,
:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .wp-block-group.cta-inline {
  display: block;
  margin: 2em 0;
  padding: 28px 26px !important;
  border-radius: 14px !important;
  background: #0a0a0a !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
  /* El fix de single-post pinta el enlace con background: var(--cd-red) !important
     (#e6243f). Redefinir el token en la tarjeta hace que gane #df1f3a sin pelear
     la especificidad; --cd-red no lleva !important en :root. */
  --cd-red: #df1f3a;
  --cd-btn-red: #df1f3a;
}

:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .cta-inline::before,
:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .wp-block-group.cta-inline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 80% 20%, rgba(223, 31, 58, 0.25), transparent 60%);
  pointer-events: none;
}

:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .cta-inline > *,
:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .wp-block-group.cta-inline > * {
  position: relative;
}

:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .cta-inline h3,
:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .cta-inline .cta-inline__title {
  font-family: var(--font-display, Poppins, sans-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff !important;
  margin: 0 0 10px;
}

:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .cta-inline p {
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78) !important;
  margin: 0 0 16px;
}

:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .cta-inline p:last-child {
  margin-bottom: 0;
}

/* !important: en single-post, cronuts-single-post-css-fix pinta
   [class*="cta"] a con background: var(--cd-red) (#e6243f) !important.
   Ese rojo no pasa AA a 14 px; se fuerza el del header. */
:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) a.cta-inline__link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  padding: 12px 20px !important;
  border-radius: 999px;
  background: #df1f3a !important;
  color: #fff !important;
  font-family: var(--font-display, Poppins, sans-serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(223, 31, 58, 0.35);
}

:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) a.cta-inline__link:hover {
  background: #c71c33 !important;
  color: #fff !important;
}

/* El enlace va a menudo DENTRO del <p>; que el boton baje a su propia linea. */
:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .cta-inline p a.cta-inline__link {
  display: flex !important;
  width: fit-content;
  margin-top: 14px;
}

/* Gana al fix de single-post (especificidad 0,6,3 + !important con --cd-red). */
.postid-74954 .post-body .prose .wp-block-group.cta-inline a.cta-inline__link:not(.btn):not([class*="__btn"]),
.postid-74961 .post-body .prose .wp-block-group.cta-inline a.cta-inline__link:not(.btn):not([class*="__btn"]) {
  background: #df1f3a !important;
  color: #fff !important;
  padding: 12px 20px !important;
  display: flex !important;
  width: fit-content;
  margin-top: 14px;
}

.postid-74954 .post-body .prose .wp-block-group.cta-inline a.cta-inline__link:not(.btn):not([class*="__btn"]):hover,
.postid-74961 .post-body .prose .wp-block-group.cta-inline a.cta-inline__link:not(.btn):not([class*="__btn"]):hover {
  background: #c71c33 !important;
  color: #fff !important;
}

/* ==========================================================================
   3. .post-toc — caja solo para el indice editorial del cuerpo
      El aside.post-toc de preview-single-post trae .post-toc__cta y ya tiene
      piel (sticky, numeracion). No se le aplica esta caja: regresion del blog.
   ========================================================================== */

:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) aside.post-toc:not(:has(.post-toc__cta)),
:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .post-toc:not(:has(.post-toc__cta)) {
  background: #f4f5f7;
  border: 1px solid rgba(36, 36, 36, 0.1);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 0 0 2em;
}

:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) aside.post-toc:not(:has(.post-toc__cta)) a,
:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .post-toc:not(:has(.post-toc__cta)) a {
  color: inherit;
}

:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) aside.post-toc:not(:has(.post-toc__cta)) .post-toc__label,
:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .post-toc:not(:has(.post-toc__cta)) .post-toc__label {
  font-family: var(--font-display, Poppins, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c71c33;
  margin: 0 0 12px;
}

/* ==========================================================================
   4. SLOT-A7 — hero CTA, firma, sticky movil, cierre
   Destino unico: /diagnostico-digital-empresa/
   Ancla: «Diagnóstico gratis →»
   Firma: Albert Puig Navàs · Co-Founder - Producto & IA en CRONUTS.DIGITAL
   ========================================================================== */

.guia-servicio .hero__ctas .btn--primary,
.guia-servicio .guia-servicio__close .btn--primary,
:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .guia-servicio-fold .btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #df1f3a;
  color: #fff;
  font-family: var(--font-display, Poppins, sans-serif);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.guia-servicio .hero__ctas .btn--primary:hover,
.guia-servicio .guia-servicio__close .btn--primary:hover,
:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .guia-servicio-fold .btn--primary:hover {
  background: #c71c33;
  color: #fff;
}

.guia-servicio__author {
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(36, 36, 36, 0.12);
  font-size: 15px;
}

.guia-servicio__close {
  margin-top: 64px;
  padding: 56px 0;
  background: #0a0a0a;
  color: #fff;
}

.guia-servicio__close-inner { max-width: 760px; }

.guia-servicio__close h2 {
  font-family: var(--font-display, Poppins, sans-serif);
  font-size: clamp(26px, 3.4vw, 36px);
  margin: 0 0 12px;
  color: #fff;
}

.guia-servicio__close p {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 20px;
  max-width: 52ch;
}

/* Sticky / pliegue movil: bajo el header, por encima del banner de cookies
   (medido a 375x812: banner y=458). En escritorio no se pinta: el header
   ya lleva .btn--primary a este mismo destino. */
:is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .guia-servicio-fold { display: none; }

@media (max-width: 812px) {
  :is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .guia-servicio-fold {
    display: block;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 45;
    background: #121212;
    padding: 8px 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  }
  :is(.guia-servicio, .page-id-74959, .page-id-70578, .page-id-74957, .postid-74954, .postid-74961) .guia-servicio-fold .btn--primary {
    display: flex;
    width: 100%;
  }
}