/* =========================================================================
   Top Dental Care — /international-patients (Fase 3)
   Se encola solo en esta página (is_page en functions.php).
   Depende de los tokens de main.css (var(--td-*)).
   ========================================================================= */

.ip-main { overflow-x: clip; }
.ip-section { padding-block: clamp(52px, 7vw, 100px); }
.ip-wrap { max-width: var(--td-maxw); margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); }
.ip-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;
}
.ip-h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin: 0 0 .5rem; }
.ip-lead { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--td-ink-soft); max-width: 62ch; }
.ip-center { text-align: center; }
.ip-center .ip-lead { margin-inline: auto; }

/* ---------------- 1. HERO (sin imagen => LCP inmediato) ---------------- */
.ip-hero {
	position: relative;
	color: #fff;
	padding-block: clamp(72px, 11vw, 140px);
	background-size: cover;
	background-position: center;
	isolation: isolate;
}
.ip-hero::before { /* overlay navy sobre la foto real — conserva el look actual, mejorado */
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(120deg, rgba(1,45,80,.94) 0%, rgba(1,79,138,.85) 55%, rgba(1,45,80,.80) 100%);
}
.ip-hero > .ip-wrap { position: relative; z-index: 1; }
.ip-hero__eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
	padding: .4rem .9rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
	margin-bottom: 1.2rem;
}
.ip-hero h1 {
	color: #fff; font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.08;
	margin: 0 0 1rem; max-width: 18ch;
}
.ip-hero h1 .hl { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 6px; }
.ip-hero p { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: rgba(255,255,255,.92); max-width: 54ch; margin: 0 0 1.8rem; }
.ip-cta-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.ip-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;
}
.ip-btn:hover { transform: translateY(-2px); text-decoration: none; }
.ip-btn--wa { background: #25D366; color: #062b16; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.ip-btn--wa:hover { background: #1fbb59; color: #062b16; box-shadow: 0 12px 30px rgba(0,0,0,.24); }
.ip-btn--ghost { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.6); }
.ip-btn--ghost:hover { background: #fff; color: var(--td-primary-dark); }
.ip-btn--primary { background: var(--td-primary); color: #fff; }
.ip-btn--primary:hover { background: var(--td-primary-dark); color:#fff; box-shadow: var(--td-shadow); }

.ip-badges { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; margin-top: 2.4rem; }
.ip-badge { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .98rem; color: #fff; }
.ip-badge svg { width: 22px; height: 22px; flex: none; }

/* ---------------- 2. WHY COSTA RICA / TOP DENTAL CARE ---------------- */
.ip-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 2.4rem; }
.ip-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;
}
.ip-card:hover { transform: translateY(-4px); box-shadow: var(--td-shadow); }
.ip-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;
}
.ip-card__ico svg { width: 28px; height: 28px; }
.ip-card h3 { font-size: 1.16rem; margin: 0 0 .4rem; }
.ip-card p { margin: 0; color: var(--td-ink-soft); font-size: .98rem; }
.ip-savings { font-size: 2.1rem; font-family: var(--td-font-head); color: var(--td-primary); font-weight: 700; line-height: 1; }
.ip-note { font-size: .84rem; color: #8892a0; margin-top: 1.6rem; font-style: italic; }

/* ---------------- 3. PROCESO PASO A PASO ---------------- */
.ip-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 2.6rem; counter-reset: step; }
.ip-step { position: relative; padding-top: 3.4rem; }
.ip-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);
}
.ip-step::after { /* línea conectora */
	content: ""; position: absolute; top: 24px; left: 48px; right: -1rem; height: 2px;
	background: var(--td-primary-100);
}
.ip-step:last-child::after { display: none; }
.ip-step h3 { font-size: 1.06rem; margin: 0 0 .35rem; }
.ip-step p { font-size: .92rem; color: var(--td-ink-soft); margin: 0; }

/* ---------------- 4. TREATMENTS ---------------- */
.ip-treat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.4rem; }
.ip-treat__item {
	background: #fff; border: 1px solid var(--td-line); border-radius: var(--td-radius);
	padding: 1.5rem; display: flex; gap: 1rem; align-items: flex-start;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s;
}
.ip-treat__item:hover { transform: translateY(-4px); box-shadow: var(--td-shadow); border-color: var(--td-primary-100); }
.ip-treat__item.is-featured { border-color: var(--td-primary); box-shadow: var(--td-shadow); }
.ip-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--td-primary); background: var(--td-primary-050); padding: .18rem .5rem; border-radius: 6px; margin-bottom: .4rem; }
.ip-treat__item h3 { font-size: 1.12rem; margin: 0 0 .3rem; }
.ip-treat__item p { margin: 0; font-size: .93rem; color: var(--td-ink-soft); }
.ip-treat__ico { width: 44px; height: 44px; flex: none; color: var(--td-primary); }

/* ---------------- 5. TESTIMONIALS (video facade + texto) ---------------- */
.ip-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.4rem; }
.ip-video {
	position: relative; aspect-ratio: 16 / 9; border-radius: var(--td-radius); overflow: hidden;
	cursor: pointer; background: #0a2540 center/cover no-repeat; border: 0; padding: 0; width: 100%;
	box-shadow: var(--td-shadow-sm);
}
.ip-video::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.45)); transition: background .3s; }
.ip-video:hover::before { background: linear-gradient(180deg, rgba(1,112,185,.2), rgba(0,0,0,.5)); }
.ip-video__play {
	position: absolute; inset: 0; margin: auto; width: 66px; height: 66px; border-radius: 50%;
	background: rgba(255,255,255,.92); display: grid; place-items: center; transition: transform .3s;
}
.ip-video:hover .ip-video__play { transform: scale(1.08); }
.ip-video__play svg { width: 26px; height: 26px; color: var(--td-primary); margin-left: 3px; }
.ip-video__label { position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem 1rem; color: #fff; font-weight: 600; font-size: .95rem; z-index: 1; }
.ip-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ip-quote-card {
	background: #fff; border: 1px solid var(--td-line); border-left: 4px solid var(--td-primary);
	border-radius: var(--td-radius); padding: 1.8rem; margin-top: 1.6rem; box-shadow: var(--td-shadow-sm);
}
.ip-quote-card blockquote { margin: 0 0 .8rem; font-size: 1.12rem; line-height: 1.6; color: var(--td-ink); }
.ip-quote-card cite { font-style: normal; font-weight: 700; color: var(--td-primary); }
.ip-placeholder {
	border: 2px dashed var(--td-primary-100); border-radius: var(--td-radius); padding: 1.6rem;
	text-align: center; color: #8892a0; background: var(--td-primary-050); font-size: .95rem;
}

/* ---------------- 6. FAQ (acordeón nativo <details>) ---------------- */
.ip-faq { max-width: 820px; margin: 2rem auto 0; }
.ip-faq details {
	background: #fff; border: 1px solid var(--td-line); border-radius: 12px;
	margin-bottom: .8rem; overflow: hidden;
}
.ip-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;
}
.ip-faq summary::-webkit-details-marker { display: none; }
.ip-faq summary::after { content: "+"; color: var(--td-primary); font-size: 1.5rem; font-weight: 400; transition: transform .3s; }
.ip-faq details[open] summary::after { transform: rotate(45deg); }
.ip-faq details p { margin: 0; padding: 0 1.3rem 1.2rem; color: var(--td-ink-soft); }

/* ---------------- 7. QUOTE CTA band + FORM ---------------- */
.ip-quoteband { background: linear-gradient(135deg, var(--td-primary), var(--td-primary-dark)); color: #fff; }
.ip-quoteband h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0 0 .6rem; }
.ip-quoteband p { color: rgba(255,255,255,.92); max-width: 60ch; margin: 0 auto 1.6rem; }
.ip-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; }
.ip-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; }
.ip-eugenio__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ip-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); }
.ip-form .wpforms-container { margin: 0; }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
	.ip-cards { grid-template-columns: repeat(2, 1fr); }
	.ip-steps { grid-template-columns: repeat(2, 1fr); }
	.ip-step::after { display: none; }
	.ip-treat { grid-template-columns: repeat(2, 1fr); }
	.ip-videos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.ip-cards, .ip-steps, .ip-treat, .ip-videos { grid-template-columns: 1fr; }
	.ip-cta-row { flex-direction: column; align-items: stretch; }
	.ip-btn { justify-content: center; }
}