/* =========================================================================
   Top Dental Care — páginas de apoyo a la campaña de Google Ads:
   /how-it-works/ · /faq/ · /travel/
   Comparten esta hoja (prefijo "sp-") por ser páginas hermanas, cortas,
   con el mismo lenguaje visual. Se encola solo en esas 3 páginas
   (is_page en functions.php). Depende de los tokens de main.css (var(--td-*)).
   ========================================================================= */

.sp-main { overflow-x: clip; }
.sp-section { padding-block: clamp(52px, 7vw, 100px); }
.sp-wrap { max-width: var(--td-maxw); margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); }
.sp-center { text-align: center; }
.sp-kicker {
	font-family: var(--td-font-body);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: .8rem;
	color: var(--td-primary);
	margin: 0 0 .6rem;
}
.sp-h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin: 0 0 .5rem; }
.sp-lead { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--td-ink-soft); max-width: 62ch; }
.sp-center .sp-lead { margin-inline: auto; }

/* ---------------- HERO (mismo patrón que services/about-us: bg + overlay) ---------------- */
.sp-hero { position: relative; color: #fff; }
.sp-hero__bg {
	position: absolute; inset: 0; z-index: 0;
	background-size: cover; background-position: center;
}
.sp-hero__bg::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(120deg, rgba(1,45,80,.92) 0%, rgba(1,79,138,.82) 55%, rgba(1,45,80,.78) 100%);
}
.sp-hero__inner {
	position: relative; z-index: 1; max-width: var(--td-maxw); margin-inline: auto;
	padding: clamp(64px, 10vw, 120px) clamp(18px, 5vw, 40px);
}
.sp-hero__inner h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.2rem); margin: 0 0 .8rem; max-width: 20ch; }
.sp-hero__inner p { color: rgba(255,255,255,.92); font-size: clamp(1.02rem, 1.5vw, 1.2rem); max-width: 54ch; margin: 0; }

/* ---------------- STEPS (proceso paso a paso, igual patrón que /international-patients/) ---------------- */
.sp-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 2.6rem; counter-reset: step; }
.sp-step { position: relative; padding-top: 3.4rem; }
.sp-step::before {
	counter-increment: step; content: counter(step);
	position: absolute; top: 0; left: 0;
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--td-primary); color: #fff; font-family: var(--td-font-head);
	font-weight: 700; font-size: 1.3rem; display: grid; place-items: center;
	box-shadow: 0 6px 16px rgba(1,112,185,.3);
}
.sp-step::after {
	content: ""; position: absolute; top: 24px; left: 48px; right: -1rem; height: 2px;
	background: var(--td-primary-100);
}
.sp-step:last-child::after { display: none; }
.sp-step h3 { font-size: 1.06rem; margin: 0 0 .35rem; }
.sp-step p { font-size: .92rem; color: var(--td-ink-soft); margin: 0; }

/* ---------------- CARDS (usado en travel: qué esperar / logística) ---------------- */
.sp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.4rem; }
.sp-card {
	background: #fff; border: 1px solid var(--td-line); border-radius: var(--td-radius);
	padding: 1.6rem 1.4rem; box-shadow: var(--td-shadow-sm);
	transition: transform .3s ease, box-shadow .3s ease;
}
.sp-card:hover { transform: translateY(-4px); box-shadow: var(--td-shadow); }
.sp-card__ico {
	width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
	background: var(--td-primary-050); color: var(--td-primary); margin-bottom: 1rem;
}
.sp-card__ico svg { width: 28px; height: 28px; }
.sp-card h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.sp-card p { margin: 0; color: var(--td-ink-soft); font-size: .96rem; }

/* ---------------- FAQ (acordeón nativo <details>, igual patrón que /international-patients/) ---------------- */
.sp-faq { max-width: 820px; margin: 2rem auto 0; }
.sp-faq details {
	background: #fff; border: 1px solid var(--td-line); border-radius: 12px;
	margin-bottom: .8rem; overflow: hidden;
}
.sp-faq summary {
	list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; font-family: var(--td-font-head);
	font-weight: 600; font-size: 1.06rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: "+"; color: var(--td-primary); font-size: 1.5rem; font-weight: 400; transition: transform .3s; }
.sp-faq details[open] summary::after { transform: rotate(45deg); }
.sp-faq details p { margin: 0; padding: 0 1.3rem 1.2rem; color: var(--td-ink-soft); }
.sp-faq-group { margin-top: 2.6rem; }
.sp-faq-group:first-child { margin-top: 0; }
.sp-faq-group__title { font-family: var(--td-font-head); font-size: 1.2rem; margin: 0 0 1rem; color: var(--td-primary-dark); }

/* ---------------- BUTTONS / CTA row (mismos nombres que sv-/ip- para consistencia) ---------------- */
.sp-btn {
	display: inline-flex; align-items: center; gap: .5rem;
	font-weight: 700; border-radius: 999px; padding: .95rem 1.6rem;
	transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s;
	text-decoration: none;
}
.sp-btn:hover { transform: translateY(-2px); text-decoration: none; }
.sp-btn--accent { background: var(--td-accent); color: var(--td-navy); }
.sp-btn--accent:hover { background: var(--td-accent-dark); color: var(--td-navy); }
.sp-btn--ghost { background: #fff; color: var(--td-primary); border: 1.5px solid var(--td-primary-100); }
.sp-btn--ghost:hover { background: var(--td-primary-050); }
.sp-btn--wa { background: #25D366; color: #062b16; }
.sp-btn--wa:hover { background: #1fbb59; color: #062b16; }
.sp-cta__row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }
.sp-center .sp-cta__row { justify-content: center; }

/* ---------------- QUOTE CTA band + form (idéntico patrón a .ip-quoteband/.ip-form) ---------------- */
.sp-quoteband { background: linear-gradient(135deg, var(--td-primary), var(--td-primary-dark)); color: #fff; }
.sp-quoteband h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0 0 .6rem; }
.sp-quoteband p { color: rgba(255,255,255,.92); max-width: 60ch; margin: 0 auto 1.6rem; }
.sp-eugenio { display: inline-flex; align-items: center; gap: .8rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: .5rem 1.1rem .5rem .5rem; margin-top: 1.4rem; font-size: .95rem; }
.sp-eugenio__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.25); display: grid; place-items: center; font-weight: 700; padding: 0; flex: none; }
.sp-eugenio__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-form { max-width: 720px; margin: 2rem auto 0; background: #fff; border: 1px solid var(--td-line); border-radius: var(--td-radius-lg); padding: clamp(1.4rem, 4vw, 2.6rem); box-shadow: var(--td-shadow); }

/* ---------------- Barra móvil de contacto (idéntica a .ip-contact-sticky) ---------------- */
.sp-contact-sticky {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
	display: none; gap: .4rem;
	padding: .5rem .55rem calc(.5rem + env(safe-area-inset-bottom, 0px));
	background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	box-shadow: 0 -6px 24px rgba(20,40,60,.16);
	transform: translateY(120%); visibility: hidden;
	transition: transform .35s ease, visibility .35s ease;
}
.sp-contact-sticky.is-visible { transform: none; visibility: visible; }
.sp-contact-sticky a {
	flex: 1; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px; padding: .75rem .35rem; font-size: .86rem; font-weight: 700; text-decoration: none;
}
.sp-contact-sticky__call { background: var(--td-accent); color: var(--td-navy); }
.sp-contact-sticky__text { background: var(--td-primary); color: #fff; }
.sp-contact-sticky__wa { background: #25D366; color: #062b16; }
.sp-contact-sticky a:hover { text-decoration: none; }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
	.sp-steps { grid-template-columns: repeat(2, 1fr); }
	.sp-step::after { display: none; }
	.sp-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.sp-steps, .sp-cards { grid-template-columns: 1fr; }
	.sp-cta__row { flex-direction: column; align-items: stretch; }
	.sp-btn { justify-content: center; }
	.sp-contact-sticky { display: flex; }
	body.sp-hasbar { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
	body.sp-hasbar .trp-language-switcher,
	body.sp-hasbar #ast-scroll-top { bottom: 82px !important; }
}