/* =========================================================================
   Sucursales — CSS compartido de Viña del Mar y Valdivia.
   Fuente: prototipo/Sucursal Vina del Mar.dc.html y Sucursal Valdivia.dc.html
   (valores 1:1). Las diferencias entre sedes van en el markup de cada
   plantilla; todo scopeado bajo .pg-sucursal.
   ========================================================================= */

/* Placeholders de foto con el texto propio del prototipo (image-slot) */
.pg-sucursal .oc-slot[data-etiqueta]::after { content: attr(data-etiqueta); }

/* -------------------------------------------------------------------------
   Encabezado (hero) con corriente de gradientes animada
   ------------------------------------------------------------------------- */
@keyframes oc-flujo {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

.pg-sucursal .suc-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--neutral-0); }
.pg-sucursal .oc-corriente { position: absolute; top: -35%; bottom: -35%; left: 0; width: 200%; background: radial-gradient(ellipse 26% 55% at 14% 32%, rgba(255, 232, 214, 0.8) 0%, rgba(255, 232, 214, 0) 70%), radial-gradient(ellipse 20% 45% at 38% 62%, rgba(255, 244, 234, 0.95) 0%, rgba(255, 244, 234, 0) 70%), radial-gradient(ellipse 26% 55% at 64% 32%, rgba(255, 232, 214, 0.8) 0%, rgba(255, 232, 214, 0) 70%), radial-gradient(ellipse 20% 45% at 88% 62%, rgba(255, 244, 234, 0.95) 0%, rgba(255, 244, 234, 0) 70%); pointer-events: none; animation: oc-flujo 55s linear infinite; }
@media (prefers-reduced-motion: reduce) {
	.pg-sucursal .oc-corriente { animation: none; }
}

.pg-sucursal .suc-hero__inner { position: relative; max-width: 1272px; margin: 0 auto; display: grid; grid-template-columns: 1fr 460px; gap: 56px; align-items: center; padding: 56px 64px 52px; }
.pg-sucursal .suc-hero__texto { display: flex; flex-direction: column; gap: 16px; }
.pg-sucursal .suc-miga { font-size: 14px; color: var(--fg-3); margin: 0; }
.pg-sucursal .suc-miga__sep { color: var(--fg-4); }
.pg-sucursal .suc-miga__actual { color: var(--navy); font-weight: 500; }
.pg-sucursal .suc-hero__titulo-fila { display: flex; align-items: center; gap: 12px; }
.pg-sucursal .suc-hero__titulo { font-family: var(--font-display); font-size: 42px; font-weight: 700; color: var(--navy); margin: 0; letter-spacing: -0.02em; }
.pg-sucursal .suc-insignia { font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--oc-orange-50); color: var(--oc-orange-600); white-space: nowrap; }
.pg-sucursal .suc-hero__bajada { font-size: 17px; line-height: 1.6; color: var(--fg-2); margin: 0; }
.pg-sucursal .suc-hero__acciones { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.pg-sucursal .suc-boton-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #fff; background: var(--oc-orange-600); padding: 13px 22px; border-radius: var(--radius-md); }
.pg-sucursal .suc-boton-cta:hover { background: var(--oc-orange-700); color: #fff; }
.pg-sucursal .suc-boton-wa { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--fg-2); padding: 12px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--neutral-0); }
.pg-sucursal .suc-boton-wa:hover { background: var(--bg-muted); color: var(--fg-2); }
.pg-sucursal .suc-hero__foto { height: 300px; position: relative; }
.pg-sucursal .suc-hero__leyenda { position: absolute; left: 14px; bottom: 14px; max-width: 80%; color: #fff; background: rgba(32, 46, 71, 0.72); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(2px); }

/* -------------------------------------------------------------------------
   Banda de respaldo (solo Valdivia: "Valdivia es parte de Oncocentro…")
   ------------------------------------------------------------------------- */
.pg-sucursal .suc-banda { padding: 20px 64px; background: var(--bg-subtle); border-top: 1px solid var(--divider); }
.pg-sucursal .suc-banda__inner { max-width: 1272px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pg-sucursal .suc-banda__texto { display: flex; align-items: center; gap: 11px; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); margin: 0; }
.pg-sucursal .suc-banda__texto svg { flex: none; }
.pg-sucursal .suc-banda__enlace { font-size: 14px; font-weight: 600; color: var(--oc-orange-600); white-space: nowrap; }

/* -------------------------------------------------------------------------
   Cuerpo: "Cómo llegar" + lateral de tarjetas
   ------------------------------------------------------------------------- */
.pg-sucursal .suc-cuerpo { max-width: 1272px; margin: 0 auto; display: grid; grid-template-columns: 1fr 360px; gap: 32px; padding: 44px 64px; align-items: start; }

.pg-sucursal .suc-llegar { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 98px; align-self: stretch; }
.pg-sucursal .suc-llegar__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.pg-sucursal .suc-titulo-seccion { font-size: 24px; font-weight: 700; color: var(--navy); margin: 0; }
.pg-sucursal .suc-boton-mapa { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--navy); border: 1px solid var(--border-strong); padding: 9px 16px; border-radius: var(--radius-md); white-space: nowrap; }
.pg-sucursal .suc-boton-mapa:hover { background: var(--bg-muted); color: var(--navy); }
.pg-sucursal .suc-llegar__mapa { flex: 1; min-height: 300px; }
.pg-sucursal .suc-llegar__mapa-iframe { width: 100%; height: 100%; min-height: 300px; border: 0; border-radius: 14px; display: block; }
.pg-sucursal .suc-direccion { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--fg-2); margin: 0; }
.pg-sucursal .suc-medios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pg-sucursal .suc-medio { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; }
.pg-sucursal .suc-medio__titulo { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--navy); }
.pg-sucursal .suc-medio__texto { font-size: 13.5px; line-height: 1.5; color: var(--fg-2); margin: 0; }
/* Video "cómo llegar" — sección navy de ancho completo (patrón reel del prototipo) */
.pg-sucursal .suc-video { background: var(--navy); }
.pg-sucursal .suc-video__inner { max-width: 1272px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr; gap: 72px; align-items: center; padding: 48px 64px; }
.pg-sucursal .suc-video__col { display: flex; flex-direction: column; gap: 10px; }
.pg-sucursal .suc-video__reel { width: 100%; }
.pg-sucursal .suc-video__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; margin: 0; }
.pg-sucursal .suc-video__pie span { color: rgba(255, 255, 255, 0.6); }
.pg-sucursal .suc-video__pie a { font-weight: 600; color: var(--oc-orange); white-space: nowrap; }
.pg-sucursal .suc-video__pie a:hover { color: #FFB380; }
/* Bloque de texto en tarjeta de vidrio oscuro (§7 liquid glass) */
.pg-sucursal .suc-video__texto { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; background: linear-gradient(165deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-lg); padding: 26px 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 28px -14px rgba(0, 0, 0, 0.4); }
.pg-sucursal .suc-video__eyebrow { margin: 0; color: var(--oc-orange); }
.pg-sucursal .suc-video__texto h2 { font-size: 26px; font-weight: 700; color: #fff; margin: 0; letter-spacing: -0.01em; }
.pg-sucursal .suc-video__texto p { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.75); margin: 0; max-width: 52ch; }

/* Lateral */
.pg-sucursal .suc-lateral { display: flex; flex-direction: column; gap: 16px; }
.pg-sucursal .suc-tarjeta { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; color: var(--fg-2); }
.pg-sucursal .suc-tarjeta__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pg-sucursal .suc-tarjeta__titulo { font-size: 16px; font-weight: 600; color: var(--navy); margin: 0; }

/* Chip de estado de atención (texto/colores los resuelve sucursal.js) */
.pg-sucursal .suc-estado { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--fg-3); background: var(--bg-muted); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.pg-sucursal .suc-estado__punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pg-sucursal .suc-estado.abierto { color: var(--success); background: var(--success-bg); }

.pg-sucursal .suc-horario { display: flex; justify-content: space-between; }
.pg-sucursal .suc-horario--cerrado { color: var(--fg-3); }
.pg-sucursal .suc-horario__hora { font-family: var(--font-mono); font-size: 13.5px; color: var(--navy); }
.pg-sucursal .suc-contacto { display: flex; align-items: center; gap: 9px; color: var(--fg-2); }
.pg-sucursal .suc-fono { font-family: var(--font-mono); font-size: 13.5px; }

.pg-sucursal .suc-tarjeta--atencion { padding: 20px 24px; background: var(--bg-subtle); gap: 8px; font-size: 14px; }
.pg-sucursal .suc-tarjeta--atencion .suc-tarjeta__titulo { font-size: 15px; }
.pg-sucursal .suc-check { display: flex; align-items: center; gap: 9px; }
.pg-sucursal .suc-nota { font-size: 13.5px; color: var(--fg-3); }
.pg-sucursal .suc-enlace-naranja { color: var(--oc-orange-600); font-weight: 600; }

.pg-sucursal .suc-minimapa { align-self: center; min-height: 280px; }
.pg-sucursal .suc-minimapa-nota { font-size: 13px; line-height: 1.55; color: var(--fg-3); margin: 0; }

/* -------------------------------------------------------------------------
   Secciones anchas: equipo médico y estudios clínicos
   ------------------------------------------------------------------------- */
.pg-sucursal .suc-seccion { max-width: 1272px; margin: 0 auto; padding: 44px 64px; display: flex; flex-direction: column; gap: 20px; }
.pg-sucursal .suc-seccion--final { padding-bottom: 56px; }
.pg-sucursal .suc-seccion__cabecera { display: flex; align-items: baseline; justify-content: space-between; }
.pg-sucursal .suc-seccion__titulos { display: flex; flex-direction: column; gap: 4px; }
.pg-sucursal .suc-enlace-mas { font-size: 14.5px; font-weight: 600; color: var(--oc-orange-600); }
.pg-sucursal .suc-enlace-mas--teal { color: var(--ac-teal-700); }

/* Equipo médico */
.pg-sucursal .suc-equipo { background: var(--bg-subtle); border-top: 1px solid var(--divider); }
.pg-sucursal .suc-equipo__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pg-sucursal .suc-doc { background: var(--neutral-0); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 20px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.pg-sucursal .suc-doc__foto { width: 88px; height: 88px; margin-bottom: 8px; }
.pg-sucursal .suc-doc__nombre { font-size: 16px; font-weight: 600; color: var(--navy); margin: 0; }
.pg-sucursal .suc-doc__rol { font-size: 13.5px; color: var(--fg-3); margin: 0; }
.pg-sucursal .suc-doc--resto { border: 1px dashed var(--border-strong); justify-content: center; gap: 6px; }
.pg-sucursal a.suc-doc--resto:hover { border-color: var(--oc-orange-600); color: inherit; }
.pg-sucursal .suc-doc--span2 { grid-column: span 2; }
.pg-sucursal .suc-doc__destacado { font-size: 14.5px; font-weight: 600; color: var(--fg-2); margin: 0; }
.pg-sucursal .suc-doc__sub { font-size: 13px; color: var(--fg-3); margin: 0; }

/* Estudios clínicos (sección con data-brand="acerey") */
.pg-sucursal .suc-estudios { border-top: 1px solid var(--divider); }
.pg-sucursal .suc-estudios .eyebrow { margin: 0; color: var(--ac-teal-700); }
.pg-sucursal .suc-estudios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pg-sucursal .suc-estudio { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.pg-sucursal .suc-estudio__fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pg-sucursal .suc-estudio__nombre { font-size: 17px; font-weight: 600; color: var(--navy); margin: 0; }
.pg-sucursal .suc-pildora-fase { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--ac-teal-50); color: var(--ac-teal-700); }
.pg-sucursal .suc-pildora-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--success-bg); color: var(--success); }
.pg-sucursal .suc-pildora-estado__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.pg-sucursal .suc-pildora-estado--prox { background: var(--bg-muted); color: var(--fg-3); }
.pg-sucursal .suc-pildora-estado--prox .suc-pildora-estado__punto { background: var(--neutral-400); }
.pg-sucursal .suc-estudio__detalle { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin: 0; }
.pg-sucursal .suc-estudio__cta { font-size: 14px; font-weight: 600; color: var(--ac-teal-700); }

/* =========================================================================
   Responsive (V2 §6): hero y cuerpo a 1 columna, grillas colapsadas
   ========================================================================= */
@media (max-width: 900px) {
	.pg-sucursal .suc-hero__inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px 36px; }
	.pg-sucursal .suc-hero__titulo { font-size: 32px; }
	.pg-sucursal .suc-hero__foto { height: 250px; }
	.pg-sucursal .suc-hero__acciones { flex-wrap: wrap; }
	.pg-sucursal .suc-banda { padding: 20px; }
	.pg-sucursal .suc-banda__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
	.pg-sucursal .suc-cuerpo { grid-template-columns: 1fr; gap: 28px; padding: 36px 20px; }
	.pg-sucursal .suc-medios { grid-template-columns: 1fr; }
	.pg-sucursal .suc-seccion { padding: 36px 20px; }
	.pg-sucursal .suc-seccion__cabecera { flex-direction: column; align-items: flex-start; gap: 8px; }
	.pg-sucursal .suc-equipo__grid { grid-template-columns: 1fr 1fr; }
	.pg-sucursal .suc-estudios__grid { grid-template-columns: 1fr; }
	.pg-sucursal .suc-video__inner { grid-template-columns: 1fr; gap: 24px; padding: 36px 20px; }
	.pg-sucursal .suc-video__col { max-width: 340px; }
}