/* Páginas de servicios (/terapia y /terapia/<área>). Colores y tipografías de la marca (Gloock + Manrope).
   Las genera tools/servicios/build.ps1. */
.sv-page {
  --sv-bg: #f0efeb;
  --sv-card: #fdfdfd;
  --sv-ink: #0c0c0c;
  --sv-muted: #545454;
  --sv-accent: #3a4768;
  --sv-dark: #2e3853;
  --sv-gold: #7d6b45;
  --sv-line: #0c0c0c1f;
  background: var(--sv-bg);
}
.sv-page .sv-wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.sv-page .sv-narrow { max-width: 780px; margin: 0 auto; padding: 0 24px; }
.sv-page h1, .sv-page h2, .sv-page h3 { font-family: Gloock, serif; font-weight: 400; color: var(--sv-ink); }
.sv-eyebrow { display: block; font-family: Manrope, sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sv-gold); margin-bottom: 18px; }
.sv-h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.12; margin: 0 0 20px; max-width: 22ch; }
.sv-lead { font-size: 1.15rem; line-height: 1.7; color: var(--sv-ink); margin: 0 0 8px; max-width: 46em; }
.sv-center { text-align: center; }
.sv-center .sv-h2, .sv-center .sv-lead { margin-left: auto; margin-right: auto; }

/* Migas */
.sv-page .blog-breadcrumb { padding-top: 120px; }

/* Héroe */
.sv-hero { padding: 28px 0 88px; }
.sv-hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); line-height: 1.05; margin: 0 0 26px; max-width: 16ch; }
.sv-hero .sv-lead { font-size: 1.2rem; max-width: 38em; }
.sv-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.sv-center .sv-ctas { justify-content: center; }
.sv-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 999px; background: var(--sv-accent); color: #fff; font-family: Manrope, sans-serif; font-weight: 700; font-size: 1rem; text-decoration: none; border: 1px solid var(--sv-accent); transition: background-color .2s ease, transform .2s ease; }
.sv-btn:hover { background: var(--sv-dark); color: #fff; transform: translateY(-1px); }
.sv-btn svg { width: 18px; height: 18px; flex: none; }
.sv-btn-ghost { background: transparent; color: var(--sv-ink); border-color: #0c0c0c40; }
.sv-btn-ghost:hover { background: var(--sv-card); color: var(--sv-ink); }
.sv-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 30px 0 0; padding: 0; list-style: none; font-size: .93rem; color: var(--sv-muted); }
.sv-trust li { display: flex; align-items: center; gap: 8px; }
.sv-trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sv-gold); }

/* Secciones */
.sv-sec { padding: 96px 0; }
.sv-sec-card { background: var(--sv-card); }
.sv-sec-soft { background: #e7e5de; }
.sv-sec-dark { background: var(--sv-dark); color: #fff; }
.sv-sec-dark h2, .sv-sec-dark .sv-lead { color: #fff; }
.sv-sec-dark .sv-eyebrow { color: #d9c9a3; }
.sv-after { margin: 36px auto 0; max-width: 40em; text-align: center; font-size: 1.05rem; line-height: 1.7; color: var(--sv-muted); }

/* "¿Te suena?" */
.sv-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 44px; }
.sv-check { display: flex; gap: 16px; align-items: flex-start; background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: 18px; padding: 22px 26px; font-size: 1.05rem; line-height: 1.55; }
.sv-sec-card .sv-check { background: var(--sv-bg); border-color: transparent; }
.sv-check svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--sv-accent); }

/* Respuesta directa (AEO) */
.sv-answer { background: var(--sv-card); border-left: 4px solid var(--sv-accent); border-radius: 0 18px 18px 0; padding: 28px 32px; margin: 0 0 40px; }
.sv-answer-label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sv-accent); margin-bottom: 10px; }
.sv-answer p { margin: 0; font-size: 1.12rem; line-height: 1.7; }

/* Texto largo, ameno */
.sv-prose { font-size: 1.1rem; line-height: 1.8; color: var(--sv-ink); }
.sv-prose p { margin: 0 0 1.15em; }
.sv-prose h3 { font-size: 1.65rem; line-height: 1.2; margin: 1.8em 0 .6em; }
.sv-prose a, .sv-faq a, .sv-note a { color: var(--sv-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sv-prose strong { font-weight: 700; }
.sv-quote { margin: 40px 0; padding: 0 0 0 28px; border-left: 2px solid var(--sv-gold); font-family: Gloock, serif; font-size: 1.6rem; line-height: 1.35; color: var(--sv-dark); }

/* Dos columnas: texto + recuadro */
.sv-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: start; }
.sv-aside { background: var(--sv-card); border-radius: 22px; padding: 34px 32px; position: sticky; top: 110px; }
.sv-sec-card .sv-aside { background: var(--sv-bg); }
.sv-aside h3 { font-size: 1.45rem; margin: 0 0 14px; }
.sv-aside * + h3 { margin-top: 30px; }
.sv-aside p { margin: 0 0 14px; line-height: 1.65; }
.sv-aside ul { margin: 0; padding-left: 1.1em; line-height: 1.7; }
.sv-aside li { margin-bottom: .45em; }
.sv-aside a { color: var(--sv-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Tarjetas con icono (enfoque) */
.sv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.sv-cards-2 { grid-template-columns: repeat(2, 1fr); }
.sv-card a { color: var(--sv-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sv-card { background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: 22px; padding: 34px 30px; }
.sv-sec-card .sv-card { background: var(--sv-bg); border-color: transparent; }
.sv-icon { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--sv-line); color: var(--sv-accent); margin-bottom: 22px; background: var(--sv-card); }
.sv-icon svg { width: 24px; height: 24px; }
.sv-card h3 { font-size: 1.4rem; line-height: 1.25; margin: 0 0 12px; }
.sv-card p { margin: 0; line-height: 1.65; color: var(--sv-muted); }

/* Pasos */
.sv-steps { display: grid; gap: 18px; margin-top: 44px; counter-reset: paso; }
.sv-step { background: var(--sv-card); border-radius: 22px; padding: 30px 34px; display: grid; grid-template-columns: 56px 1fr; gap: 6px 22px; align-items: start; }
.sv-step-num { grid-row: span 2; display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: var(--sv-accent); color: #fff; font-weight: 700; font-size: 1.1rem; }
.sv-step h3 { font-size: 1.45rem; margin: 6px 0 4px; }
.sv-step p { margin: 0; line-height: 1.65; color: var(--sv-muted); }

/* Reseñas */
.sv-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; text-align: left; }
.sv-review { margin: 0; display: flex; flex-direction: column; gap: 18px; padding: 30px 28px; border-radius: 20px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); }
.sv-review blockquote { margin: 0; padding: 0; border: 0; font-size: 1.08rem; line-height: 1.65; color: #fff; }
.sv-review figcaption { margin-top: auto; font-size: .9rem; color: rgba(255, 255, 255, .75); }
.sv-reviews-note { margin: 26px 0 0; font-size: .9rem; color: rgba(255, 255, 255, .7); }
.sv-sec-dark .sv-on-dark { color: #fff; border-color: rgba(255, 255, 255, .55); }
.sv-sec-dark .sv-on-dark:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sv-sec-dark .sv-btn:not(.sv-on-dark) { background: #fff; color: var(--sv-dark); border-color: #fff; }
.sv-sec-dark .sv-btn:not(.sv-on-dark):hover { background: #f0efeb; }

/* Quién te acompaña */
.sv-me { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; }
.sv-me img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 15%; border-radius: 24px; display: block; }
.sv-me ul { margin: 18px 0 24px; padding-left: 1.1em; line-height: 1.75; color: var(--sv-ink); }

/* Preguntas frecuentes */
.sv-faq { margin-top: 36px; border-bottom: 1px solid #0c0c0c26; }
.sv-faq details { border-top: 1px solid #0c0c0c26; }
.sv-faq summary { cursor: pointer; padding: 22px 0; font-weight: 700; font-size: 1.12rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(#0c0c0c, #0c0c0c) center / 100% 2px no-repeat, linear-gradient(#0c0c0c, #0c0c0c) center / 2px 100% no-repeat; }
.sv-faq details[open] summary::after { background: linear-gradient(#0c0c0c, #0c0c0c) center / 100% 2px no-repeat; }
.sv-faq details p { margin: 0 0 24px; line-height: 1.7; font-size: 1.05rem; max-width: 46em; }

/* Otras áreas */
.sv-areas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sv-area-chip { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border: 1px solid #0c0c0c33; border-radius: 999px; background: var(--sv-card); color: var(--sv-ink); text-decoration: none; font-weight: 600; transition: border-color .2s ease, color .2s ease; }
.sv-area-chip:hover { border-color: var(--sv-accent); color: var(--sv-accent); }

/* Lecturas relacionadas (tarjetas del blog) */
.sv-page .blog-grid { margin-top: 36px; }

/* Página /terapia (todas las áreas) */
.sv-hub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; }
.sv-hub-card { display: flex; flex-direction: column; background: var(--sv-card); border: 1px solid var(--sv-line); border-radius: 24px; padding: 36px 34px; text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease; }
.sv-hub-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sv-hub-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px #0c0c0c14; }
.sv-hub-card h3 { font-size: 1.75rem; line-height: 1.15; margin: 0 0 12px; }
.sv-hub-card p { margin: 0 0 18px; line-height: 1.65; color: var(--sv-muted); }
.sv-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.sv-tags li { font-size: .85rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--sv-bg); color: var(--sv-dark); }
.sv-more { margin-top: auto; font-weight: 700; color: var(--sv-accent); }
.sv-other { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.sv-other div { background: var(--sv-card); border-radius: 18px; padding: 22px 24px; }
.sv-other h3 { font-size: 1.2rem; margin: 0 0 6px; }
.sv-other p { margin: 0; line-height: 1.6; color: var(--sv-muted); font-size: .98rem; }
.sv-note { background: var(--sv-card); border: 1px dashed #0c0c0c40; border-radius: 22px; padding: 30px 34px; margin-top: 40px; line-height: 1.7; }
.sv-note h3 { font-size: 1.4rem; margin: 0 0 10px; }
.sv-note p { margin: 0 0 10px; }
.sv-note p:last-child { margin: 0; }

@media screen and (max-width: 991px) {
  .sv-split, .sv-me { grid-template-columns: 1fr; gap: 36px; }
  .sv-aside { position: static; }
  .sv-cards, .sv-other, .sv-reviews { grid-template-columns: 1fr 1fr; }
  .sv-me img { max-width: 320px; }
}
@media screen and (max-width: 767px) {
  .sv-page .sv-wrap { padding: 0 20px; }
  .sv-page .sv-narrow { padding: 0 20px; }
  .sv-page .blog-breadcrumb { padding-top: 96px; }
  .sv-hero { padding: 16px 0 64px; }
  .sv-hero .sv-lead, .sv-lead { font-size: 1.06rem; }
  .sv-prose { font-size: 1.04rem; }
  .sv-sec { padding: 68px 0; }
  .sv-checks, .sv-cards, .sv-hub, .sv-other, .sv-reviews { grid-template-columns: 1fr; }
  .sv-step { grid-template-columns: 1fr; padding: 26px 24px; }
  .sv-step-num { grid-row: auto; }
  .sv-btn { width: 100%; justify-content: center; }
  .sv-answer { padding: 22px 22px; }
  .sv-quote { font-size: 1.35rem; }
}

.sv-other a { color: var(--sv-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Versión compacta (oct 2026): respuesta en la cabecera, firma, pasos en la llamada a la acción ---- */
.sv-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.sv-hero .sv-answer { margin: 0; background: var(--sv-card); box-shadow: 0 18px 40px #0c0c0c0f; border-radius: 0 22px 22px 0; }
.sv-hero .sv-answer p { font-size: 1.05rem; }
.sv-sec-tight { padding: 64px 0; }
.sv-sec-tight .sv-reviews { margin-top: 20px; }
.sv-author-sec { padding: 44px 0 8px; }
.sv-author { display: flex; gap: 22px; align-items: center; padding: 22px 26px; border: 1px solid var(--sv-line); border-radius: 22px; background: var(--sv-card); }
.sv-author img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: center 15%; flex: none; }
.sv-author p { margin: 0; line-height: 1.65; font-size: .98rem; color: var(--sv-muted); }
.sv-author strong { color: var(--sv-ink); }
.sv-author a { color: var(--sv-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.sv-mini-steps { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; color: rgba(255, 255, 255, .85); font-size: .98rem; }
.sv-mini-steps li { display: flex; align-items: center; gap: 10px; }
.sv-mini-steps span { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 700; font-size: .85rem; }
.sv-faq { margin-top: 8px; }
@media screen and (max-width: 991px) {
  .sv-hero-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media screen and (max-width: 767px) {
  .sv-sec-tight { padding: 52px 0; }
  .sv-author { flex-direction: column; text-align: center; }
  .sv-mini-steps { flex-direction: column; align-items: center; }
}

.sv-tags-lg { margin-top: 28px; gap: 10px; }
.sv-tags-lg li { font-size: .98rem; padding: 10px 18px; background: var(--sv-card); border: 1px solid var(--sv-line); }
.sv-tags-lg a { color: var(--sv-accent); text-decoration: underline; text-underline-offset: 3px; }

/* Ajustes 19-oct: título más contenido junto a la respuesta, aire bajo la firma */
.sv-hero-grid h1 { font-size: clamp(2.4rem, 4.2vw, 3.5rem); max-width: 18ch; }
.sv-author-sec { padding: 56px 0 72px; }

/* ---- Estilo igual que la portada (19-oct): antetítulo sencillo, palabras clave en azul, fotos junto al texto ---- */
.sv-eyebrow { font-family: Manrope, sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--sv-ink); margin-bottom: 16px; }
.sv-sec-dark .sv-eyebrow { color: rgba(255, 255, 255, .85); }
.sv-h2 { font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 24px; }
.sv-lead, .sv-hero .sv-lead { font-size: 1.125rem; line-height: 1.6; }
.sv-lead strong, .sv-prose strong, .sv-check strong { color: var(--sv-accent); font-weight: 700; }
.sv-prose { font-size: 1.125rem; line-height: 1.65; }
.sv-prose p { margin: 0 0 1em; }
.sv-prose h3 { font-size: 1.5rem; margin: 1.5em 0 .45em; }
.sv-btn { padding: 12px 26px; font-weight: 600; border-width: 1px; }
.sv-btn-ghost { border-color: #0c0c0c26; }
.sv-split-img { display: grid; grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: center; }
.sv-split-img .sv-prose > *:last-child { margin-bottom: 0; }
.sv-photo { margin: 0; }
.sv-photo img { width: 100%; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; border-radius: 24px; display: block; }
.sv-check { font-size: 1.02rem; }
.sv-faq summary { font-weight: 600; }
@media screen and (max-width: 991px) {
  .sv-split-img { grid-template-columns: 1fr; gap: 40px; }
  .sv-photo img { aspect-ratio: 4 / 3; }
}
@media screen and (max-width: 767px) {
  .sv-prose, .sv-lead, .sv-hero .sv-lead { font-size: 1.05rem; }
}

.sv-answer-label { text-transform: none; letter-spacing: normal; font-size: .95rem; }
