/* Ficha · sector y salud (single-sector.php). Marcos Figma «sector /industries/plumbers/» (21:3115 /
   21:3554, banda de foto 43:11126 / 43:11130) y «salud /industries/dental-clinics/» (28:6313 / 28:6575).
   Se carga tras ficha-protocolo.css (pasos, urgencias, lo que nunca dice y lo que decides) y
   secciones.css (rejilla con pieza a la derecha, calculadora de planes): aquí solo lo propio del
   sector. Solo variables de tokens.css. */

/* ---------- Salud: el aviso fijo tras la respuesta corta (marco: caja bajo la cabecera) ---------- */
.ficha-aviso--respuesta { margin-top: var(--sp-24); margin-bottom: 0; }

/* ---------- Banda de foto de oficio, a lo ancho (13:5; en móvil, 4:3) ---------- */
.sector-banda { padding-block: 0 var(--section-y); }
.sector-banda__marco {
	margin: 0; overflow: hidden; aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg); background: var(--arg-neutral-100); box-shadow: var(--shadow-card);
}
.sector-banda__marco picture, .sector-banda__img { display: block; width: 100%; height: 100%; }
.sector-banda__img { object-fit: cover; }
@media (min-width: 600px) { .sector-banda__marco { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) { .sector-banda__marco { aspect-ratio: 13 / 5; } }
@media (prefers-reduced-motion: no-preference) {
	.sector-banda__marco.pag-anima--js .sector-banda__img { transform: scale(1.06); transition: transform 12s cubic-bezier(.2, .6, .2, 1); }
	.sector-banda__marco.pag-anima--on .sector-banda__img { transform: none; }
}

/* ---------- Texto a dos columnas: el título a la izquierda y el texto a la derecha (escena, método sin
   reglas, precio de salud). Nada de mitad derecha vacía (regla fija del 14-10). ---------- */
.sector-dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); align-items: start; }
.sector-dos__titulo h2, h2.sector-dos__titulo { font-size: var(--fs-h2-s); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; }
.sector-dos__texto { max-width: var(--measure); font-size: var(--fs-18); line-height: 1.55; }
.sector-dos__texto > * + * { margin-top: var(--sp-16); }
.seccion--oscura .sector-dos__texto { color: var(--arg-on-dark-weak); }
@media (min-width: 900px) {
	.sector-dos { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-64); }
}
@media (min-width: 1024px) {
	.sector-dos__texto { font-size: var(--fs-20); line-height: 1.5; }
	.sector-dos__titulo h2, h2.sector-dos__titulo { font-size: var(--fs-41); }
}

/* ---------- Cómo va la llamada, sobre oscuro (marco: «What it asks on a plumbing call») ---------- */
.sector-pasos .ficha-paso::before { background: var(--arg-on-dark-accent); }
.sector-pasos .ficha-paso__numero { color: var(--arg-on-dark-accent); }
.sector-pasos .ficha-paso__titulo { color: var(--arg-on-dark); }
.sector-pasos .ficha-paso__texto { color: var(--arg-on-dark-weak); }
.sector-pasos .ficha-paso__frase { border-color: var(--arg-neutral-700); background: var(--arg-neutral-800); color: var(--arg-on-dark); }
@media (prefers-reduced-motion: no-preference) {
	.sector-pasos .ficha-pasos__lista.pag-anima--on .ficha-paso__numero { color: var(--arg-on-dark-accent); }
}
/* Desde 1100, cuatro pasos en una fila (como el marco) en vez de 2 × 2. */
@media (min-width: 1100px) {
	.sector-pasos .ficha-pasos__lista:has(> .ficha-paso:last-child:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sector-pasos .ficha-pasos__lista:has(> .ficha-paso:last-child:nth-child(4)) > .ficha-paso { grid-column: auto; }
}
.sector-pasos__pie { margin-top: var(--sp-48); max-width: var(--measure); color: var(--arg-on-dark-weak); font-size: var(--fs-18); line-height: 1.55; }
.sector-pasos__pie a { color: var(--arg-on-dark-accent); }
/* El esquema del protocolo (SVG en <img>), en su tarjeta clara. */
.sector-esquema { margin: var(--sp-48) 0 0; padding: var(--sp-16); border-radius: var(--radius-lg); background: var(--arg-white); }
.sector-esquema picture, .sector-esquema img { display: block; width: 100%; height: auto; }
@media (min-width: 1024px) { .sector-esquema { padding: var(--sp-32); } }

/* ---------- Sub-índice: las hijas como tarjetas (ficha-comun.css) ---------- */
.sector-hijas .pag-seccion__cabeza { margin-bottom: var(--sp-32); }

/* ---------- El método, sobre oscuro: las reglas a la derecha ---------- */
.sector-metodo .sec-rejilla__texto h2 { font-size: var(--fs-h2-s); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; }
.sector-metodo__intro { margin-top: var(--sp-24); color: var(--arg-on-dark-weak); font-size: var(--fs-18); line-height: 1.55; }
.sector-metodo__intro > * + * { margin-top: var(--sp-16); }
.sector-reglas .pag-regla > p { font-size: var(--fs-18); }
@media (min-width: 1024px) {
	.sector-metodo .sec-rejilla__texto h2 { font-size: var(--fs-41); }
	.sector-metodo__intro { font-size: var(--fs-20); line-height: 1.5; }
}
@media (prefers-reduced-motion: no-preference) {
	.sector-reglas.pag-anima--js .pag-regla { opacity: 0; transform: translateY(8px); transition: opacity .5s ease calc(var(--i, 0) * .2s), transform .5s ease calc(var(--i, 0) * .2s); }
	.sector-reglas.pag-anima--on .pag-regla { opacity: 1; transform: none; }
}

/* ---------- Salud: la lista de espera con su formulario ---------- */
.sector-espera h2 { font-size: var(--fs-h2-s); line-height: var(--lh-heading); }
.sector-espera .sec-rejilla__texto > * + * { margin-top: var(--sp-16); color: var(--arg-on-dark-weak); }
.sector-espera__nota { font-size: var(--fs-16); }
.sector-espera__form { padding: var(--sp-24); border-radius: var(--radius-lg); background: var(--arg-white); color: var(--arg-text); }
@media (min-width: 900px) { .sector-espera .sec-rejilla { align-items: center; } }