/* =========================================================================
   Supervisión clínica: landing a código (templates/landing-supervision.php).
   Reutiliza tokens, botones y tarjetas de tfe-landing.css (.tfe-landing).
   Mobile first; sin anchos fijos.
   ========================================================================= */

.sup-landing { background: var(--tfe-white); }
.sup-landing section { overflow-x: clip; }
.sup-center { text-align: center; }
.sup-landing .sup-h2 { font-size: clamp(26px, 4.4vw, 38px); font-weight: 700; line-height: 1.2; margin: 0 0 14px; }
.sup-landing .sup-h2--light { color: var(--tfe-white); }
.sup-lead { font-size: 17px; max-width: 760px; margin-bottom: 26px; }
.sup-center .sup-lead, .sup-lead.sup-center { margin-left: auto; margin-right: auto; }
.sup-landing h3 { font-size: 19px; line-height: 1.25; margin: 0 0 8px; }
.sup-landing .tfe-eyebrow { color: var(--tfe-green-700); }

/* ---------- Hero ---------- */
.sup-hero { padding: 32px 0 36px; background: linear-gradient(180deg, var(--tfe-green-50) 0%, var(--tfe-white) 100%); }
.sup-hero__grid { display: grid; gap: 26px; }
.sup-landing h1.sup-hero__title { font-size: clamp(29px, 5.6vw, 44px); font-weight: 700; line-height: 1.15; color: var(--tfe-green-800); margin: 0 0 14px; }
.sup-hero__intro { font-size: 17px; color: var(--tfe-ink); margin-bottom: 18px; }
.sup-landing ul.sup-hero__list { margin: 0 0 22px; }
.sup-hero__list strong { color: var(--tfe-green-800); }
.sup-hero__cta { display: flex; flex-direction: column; gap: 10px; }
.sup-hero__note { font-size: 14px; color: var(--tfe-muted); margin: 12px 0 0; }
.sup-hero__card { padding: 24px; align-self: start; border-top: 6px solid var(--tfe-green-700); }
.sup-hero__price { font-size: 18px; color: var(--tfe-ink); margin: 0 0 14px; }
.sup-hero__price span { display: block; font-size: 44px; font-weight: 700; line-height: 1; color: var(--tfe-green-800); }
.sup-landing ul.sup-hero__facts { list-style: none; margin: 0 0 16px; padding: 0; }
.sup-hero__facts li { padding: 7px 0 7px 26px; position: relative; border-bottom: 1px solid var(--tfe-green-50); }
.sup-hero__facts li::before { content: "✓"; position: absolute; left: 2px; color: var(--tfe-green-700); font-weight: 700; }
.sup-hero__where { font-size: 14px; color: var(--tfe-muted); margin: 0; }

/* ---------- Rejillas y tarjetas ---------- */
.sup-grid { display: grid; gap: 16px; }
.sup-card { padding: 22px; }
.sup-card p, .sup-item p, .sup-paso p { margin: 0; color: var(--tfe-ink); }
.sup-item { padding: 18px 0 18px 18px; border-left: 4px solid var(--tfe-green-100, #cfe3de); }

/* ---------- Pasos ---------- */
.sup-landing ol.sup-pasos { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 14px; counter-reset: paso; }
.sup-paso { position: relative; padding: 18px 18px 18px 66px; background: var(--tfe-white); border-radius: var(--tfe-radius-sm); box-shadow: var(--tfe-shadow); }
.sup-paso__num { position: absolute; left: 18px; top: 18px; width: 34px; height: 34px; border-radius: 50%; background: var(--tfe-green-800); color: var(--tfe-white); font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ---------- Formatos ---------- */
.sup-formato { padding: 24px; text-align: center; }
.sup-formato--destacado { border: 2px solid var(--tfe-green-700); }
.sup-formato__precio { font-size: 36px; font-weight: 700; color: var(--tfe-green-800); margin: 4px 0 0; line-height: 1.1; }
.sup-formato__duracion { color: var(--tfe-muted); margin: 0 0 12px; font-size: 14px; }
.sup-formato p:last-child { margin: 0; }
.sup-formato__cta { margin-top: 16px !important; }
.sup-formato .tfe-btn--block { width: 100%; justify-content: center; }

/* ---------- Equipo ---------- */
.sup-equipo__wrap { max-width: 820px; }
.sup-equipo__text { color: #e6f0ee; font-size: 17px; }

/* ---------- Formulario ---------- */
.sup-solicitar__wrap { display: grid; gap: 24px; }
.sup-solicitar__alt { font-size: 15px; color: var(--tfe-muted); }
.sup-solicitar__box { padding: 22px; }
.sup-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sup-form__grid { display: grid; gap: 12px; }
.sup-form__field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sup-form__field label { font-size: 14px; font-weight: 600; color: var(--tfe-ink); }
.sup-form input[type="text"], .sup-form input[type="email"], .sup-form input[type="tel"], .sup-form select, .sup-form textarea {
	width: 100%; padding: 11px 12px; border: 1px solid #cfd8d5; border-radius: var(--tfe-radius-sm); font: inherit; background: var(--tfe-white);
}
.sup-form textarea { resize: vertical; min-height: 120px; }
.sup-form input:focus, .sup-form select:focus, .sup-form textarea:focus { outline: 2px solid var(--tfe-green-700); outline-offset: 1px; }
.sup-form .is-invalid { border-color: #b42318; }
.sup-form__consent { margin: 14px 0 6px; font-size: 14px; }
.sup-form__consent input { margin-right: 8px; }
.sup-form__legal { font-size: 12px; color: var(--tfe-muted); margin: 0 0 14px; }
.sup-form__actions { margin: 0; }
.sup-form__msg { margin: 12px 0 0; font-size: 15px; min-height: 1em; }
.sup-form__msg.is-ok { color: var(--tfe-green-800); font-weight: 600; }
.sup-form__msg.is-error { color: #b42318; }
.sup-form.is-sending button { opacity: 0.6; pointer-events: none; }
.sup-form.is-sent .sup-form__grid, .sup-form.is-sent .sup-form__consent, .sup-form.is-sent .sup-form__legal, .sup-form.is-sent .sup-form__actions { display: none; }

/* ---------- FAQ ---------- */
.sup-faq__list { display: grid; gap: 10px; max-width: 860px; }
.sup-faq__item { background: var(--tfe-white); border-radius: var(--tfe-radius-sm); box-shadow: var(--tfe-shadow); padding: 4px 18px; }
.sup-faq__item summary { cursor: pointer; font-weight: 600; padding: 12px 0; list-style: none; position: relative; padding-right: 28px; }
.sup-faq__item summary::-webkit-details-marker { display: none; }
.sup-faq__item summary::after { content: "+"; position: absolute; right: 0; top: 10px; font-size: 22px; color: var(--tfe-green-700); }
.sup-faq__item[open] summary::after { content: "–"; }
.sup-faq__answer { padding: 0 0 14px; }
.sup-faq__answer p:last-child { margin-bottom: 0; }

/* ---------- Cierre ---------- */
.sup-cierre { padding-bottom: 72px; }

/* ---------- Barra fija móvil ---------- */
.sup-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) 88px; /* hueco para el botón flotante de WhatsApp del sitio */ background: var(--tfe-white); box-shadow: 0 -6px 20px rgba(0,0,0,0.12); transform: translateY(110%); transition: transform 0.25s; }
.sup-sticky.is-visible { transform: none; }
.sup-sticky .tfe-btn { width: 100%; justify-content: center; }

/* ---------- Escritorio ---------- */
@media (min-width: 700px) {
	.sup-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.sup-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.sup-hero__cta { flex-direction: row; flex-wrap: wrap; }
	.sup-form__grid { grid-template-columns: repeat(2, 1fr); }
	.sup-form__field--full { grid-column: 1 / -1; }
	.sup-landing ol.sup-pasos { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.sup-hero { padding: 56px 0 60px; }
	.sup-hero__grid { grid-template-columns: 1.4fr 1fr; align-items: start; gap: 48px; }
	.sup-solicitar__wrap { grid-template-columns: 1fr 1.3fr; align-items: start; gap: 40px; }
	.sup-landing ol.sup-pasos { grid-template-columns: repeat(4, 1fr); }
	.sup-sticky { display: none; }
}